隐藏文件上传按钮但显示文件名？答案

【问题标题】：Hide file upload button but show file names?隐藏文件上传按钮但显示文件名？
【发布时间】：2020-09-22 01:43:01
【问题描述】：

我为多个文件上传制作了一个简单的拖放区。我希望用户只需将他们的文件拖到放置区域并在那里显示文件名。我通过在 CSS 中设置“显示：无”隐藏了标准的“选择文件”按钮。但这也隐藏了文件名。有没有简单的方法来解决这个问题？我是初学者。谢谢！

HTML：

         <div class="drop-area">
            <span class= "drop-area__prompt">Dateien hier her ziehen</span>
            <input type="file" name="myFile" class= "drop-area__input">
        </div>

CSS：

.drop-area__input{ 
    display:none;
}

【问题讨论】：

在删除文件时显示隐藏的输入是否是一种解决方案？
在这种情况下，“选择文件”按钮也会显示出来，这是我试图避免的。

标签： javascript html css file-upload drag-and-drop

【解决方案1】：

在我看来，不使用 JS 是没有办法的。在我的示例中，通过点击表情符号触发文件上传。在您的情况下，您必须将其放入处理拖放的方法中。

let fileUpload = document.getElementById('fileUpload');
let fileName = document.getElementById('fileName');

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

<div class="drop-area">
            <span class= "drop-area__prompt">Dateien hier her ziehen</span>
            <span id="fileName"></span>
            <label>
                    <img height="30" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/237/outbox-tray_1f4e4.png"/>
                    <input id="fileUpload" type="file" name="myFile" class= "drop-area__input" style="display:none;">
            </label>
</div>

【讨论】：