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

我有一个代码，它有一个隐藏的输入文件类型，但从回形针图标调用，但它不会向用户显示已选择上载的文件

如果我从输入字段中删除display none，您将看到“选择文件”以及我选择的文件。是否有一种方法可以在上传文件后立即显示该文件，例如：

以下是我目前掌握的代码：

<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>

/assest/icon img/paperclip.png“class=”ic#img“onclick=“$（'input#hidden#upload_file_chating'）。单击（）；">
回复
关

var fileBtn=document.getElementById（'fileUpload'）；
var sName=document.getElementById（“u showName”）；
fileBtn.addEventListener（'change'，函数（_th）{
if（this.files.length）
sName.innerText=this.files[0]。名称；
其他的
sName.innerText=''；
})；

/assest/icon img/paperclip.png“class=“ic\u img”>
回复
关

我只需为单击图标打开的文件编写一个基本代码段。试试这个，我希望它能帮你。谢谢

。聊天吧{
显示器：flex；
}
.fileUploadWrap{
背景图像：url（'https://cdn2.iconfinder.com/data/icons/budicon-document-2/16/69-document_-_attachment_clip_paperclip-512.png');
背景重复：无重复；
背景尺寸：包含；
位置：相对位置；
高度：40px；
宽度：40px；
}
#隐藏\u上传\u文件\u聊天{
不透明度：0；
位置：绝对位置；
身高：100%；
宽度：100%；
}

回复
关

您还可以共享CSS吗？谢谢，仅仅隐藏输入字段是无法做到这一点的，您需要这样的自定义实现。