如何隐藏输入文件类型但仍显示上传的文件？

Question

我有一个代码具有隐藏的输入文件类型，但从回形针图标中调用了该代码，但是它没有向用户显示已选择了要上传的文件。

如果我从输入字段中删除了不显示任何内容，您将看到“选择文件”以及我选择的文件。有没有一种方法可以在文件上传后立即显示它，例如：

这是我到目前为止的代码：

<div class="chat-right">
    <input type="file" name="file" class="form-control" style="display:none;" id="hidden_upload_file_chatting">

    <img src="<?php echo base_url();?>/assest/icon-img/paperclip.png" class="ic_img" onclick="$('input#hidden_upload_file_chatting').click();">

    <button type="submit" class="btn btn-flat" name="reply" value="reply" >Reply</button>

    <button type="button" class="btn btn-flat" data-dismiss="modal" style="margin-left: 10px !important;">Close</button>
</div>

Answer 1

var fileBtn = document.getElementById('fileUpload');
var sName = document.getElementById('_showName');

fileBtn.addEventListener('change', function(_th){
 if(this.files.length)
    sName.innerText = this.files[0].name;
 else
     sName.innerText = '';
});

<div class="chat-right">
<label>  
    <img src="<?php echo base_url();?>/assest/icon-img/paperclip.png" class="ic_img" >
    <span id="_showName"></span>
    <input type="file" name="file" class="form-control" style="display:none;" id="fileUpload">
</label>

<button type="submit" class="btn btn-flat" name="reply" value="reply" >Reply</button>

<button type="button" class="btn btn-flat" data-dismiss="modal" style="margin-left: 10px !important;">Close</button>
</div>

Answer 2

我只写了一个基本的代码片段，单击图标即可打开文件。试试这个，希望对您有所帮助。谢谢

Error: dataCorrupted(Swift.DecodingError.Context(codingPath: [], debugDescription: "The given data was not valid JSON.", underlyingError: Optional(Error Domain=NSCocoaErrorDomain Code=3840 "No string key for value in object around character 6." UserInfo={NSDebugDescription=No string key for value in object around character 6.})))

.chat-right {
  display: flex;
}

.fileUploadWrap {
  background-image: url('https://cdn2.iconfinder.com/data/icons/budicon-document-2/16/69-document_-_attachment_clip_paperclip-512.png');
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  height: 40px;
  width: 40px;
}

#hidden_upload_file_chatting {
  opacity: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}