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

Question

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

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

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

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

Hide file upload button but show file names?

html

javascript

css

drag-and-drop

file-upload