2014-01-29 72 views
5

我使用「多個」標籤讓用戶選擇多個文件上傳。HTML:選擇多個文件但沒有顯示文件名?

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

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

它可行嗎?謝謝。

順便說一句,在這種情況下如何取消選擇文件(例如清除列表)?

回答

6

您可以通過輸入元素上.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或單擊文件選擇窗口上的「取消」。

+0

這有助於很多,謝謝! – user180574

+2

謝謝!我喜歡這種方法,但是我在選擇多個文件時將其更改爲僅添加文件名,因爲當您僅選擇1個文件時,默認顯示1個文件名。 'if(this.files.length> 1){for loop ...}' – Chris

+0

這很漂亮。 –