5
我使用「多個」標籤讓用戶選擇多個文件上傳。HTML:選擇多個文件但沒有顯示文件名?
<input type="file" name="files[]" multiple />
但它只顯示例如「3個文件被選中」。還會顯示文件名稱會更好。
它可行嗎?謝謝。
順便說一句,在這種情況下如何取消選擇文件(例如清除列表)?
我使用「多個」標籤讓用戶選擇多個文件上傳。HTML:選擇多個文件但沒有顯示文件名?
<input type="file" name="files[]" multiple />
但它只顯示例如「3個文件被選中」。還會顯示文件名稱會更好。
它可行嗎?謝謝。
順便說一句,在這種情況下如何取消選擇文件(例如清除列表)?
您可以通過輸入元素上.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或單擊文件選擇窗口上的「取消」。
這有助於很多,謝謝! – user180574
謝謝!我喜歡這種方法,但是我在選擇多個文件時將其更改爲僅添加文件名,因爲當您僅選擇1個文件時,默認顯示1個文件名。 'if(this.files.length> 1){for loop ...}' – Chris
這很漂亮。 –