HTML：選擇多個文件但沒有顯示文件名？

Question

我使用「多個」標籤讓用戶選擇多個文件上傳。

<input type="file" name="files[]" multiple /> 

但它只顯示例如「3個文件被選中」。還會顯示文件名稱會更好。

它可行嗎？謝謝。

順便說一句，在這種情況下如何取消選擇文件（例如清除列表）？

Answer 1

您可以通過輸入元素上.files屬性做到這一點：

document.getElementById('files').addEventListener('change', function(e) { 
 
    var list = document.getElementById('filelist'); 
 
    list.innerHTML = ''; 
 
    for (var i = 0; i < this.files.length; i++) { 
 
    list.innerHTML += (i + 1) + '. ' + this.files[i].name + '\n'; 
 
    } 
 
    if (list.innerHTML == '') list.style.display = 'none'; 
 
    else list.style.display = 'block'; 
 
});

<input type="file" id="files" multiple /> 
 
<pre id="filelist" style="display:none;"></pre>

這首先清空的情況下，仍然有從以前選擇的東西的清單，然後經過然後將其添加到輸入下方的<pre>元素。如果列表中沒有選定項目，則將隱藏<pre>。

PS：您可以通過點擊輸入清除列表，然後按esc或單擊文件選擇窗口上的「取消」。