Javascript從文件輸入元素獲取多個文件及其文件名具有多個屬性？

我有一個multiple="multiple"屬性的文件輸入，允許用戶一次選擇多個文件。我想顯示上傳之前選定的文件名和他們的計數，但我不知道如何從文件輸入元素使用JavaScript獲取此信息？Javascript從文件輸入元素獲取多個文件及其文件名具有多個屬性？

<input type="file" id="fileElementId" name="files[]" size="20" multiple="multiple" />

我已經試過這樣：

document.getElementById('fileElementId').value

但這僅返回時我選擇多個文件一個文件名。使用JavaScript是如何從具有multiple屬性的文件輸入元素中檢索所選文件及其名稱的數量？

來源

2011-05-29 Stann

在支持HTML5文件的東西新的瀏覽器，你<input>元素將有一個「文件」屬性。這會給你一個「FileList」引用，它有一個「.length」屬性。在「FileList」實例上還有一個名爲「.item（）」的訪問方法，它需要一個整數參數來訪問單個的「文件」元素。那些擁有「.name」屬性。

所以：

var inp = document.getElementById('fileElementId'); 
for (var i = 0; i < inp.files.length; ++i) { 
    var name = inp.files.item(i).name; 
    alert("here is a file name: " + name); 
}

這當然會在較老版本的IE無法正常工作，我甚至不能確定的Safari和Chrome支持是多麼徹底的;但是，如果您正在使用文件輸入設置的「多個」頁面編寫頁面，則您已在邊緣跳舞:-)

來源

2011-05-29 23:13:14 Pointy

多個作品在Firefox 3.6 +，Chrome 2+，Safari 4+，Opera 11+等等，所以是的 - 除IE外的任何地方（甚至不包括IE9）。對我來說，告訴人們升級瀏覽器比通過修復flash cookie錯誤引入會話固定問題更容易，因爲唯一可行的選擇是flash上傳器。 – Stann 2011-05-29 23:24:39

雖然感謝。這在我的鉻，火狐，歌劇，野生動物園工作。在IE的垃圾堆裏肯定失敗了。 :)大聲笑 – Stann 2011-05-29 23:28:41

FWIW如果你需要文件的大小：'fileSize = inp.files.item（i）.size' – gordon 2012-06-22 21:41:54

這是未經測試，但你可以嘗試：

$('#fileElementId').get(0).files;

或

document.getElementById('fileElementId').files;

來源

2011-05-29 23:10:56 devmatt

+15

爲什麼不測試它，讓我們知道它是否可行 – Ibu 2011-05-29 23:33:28

@lbu：我不明白爲什麼它不會。主要的是 - 「文件」元素屬性。也是 - 是的 - 我檢查 - 它工作或者jquery或原始的方式。 – Stann 2011-05-30 02:27:44

$（'＃fileElementId'）。get（0）.files它只返回對象。改用$（'＃fileElementId'）。get（0）.files.length。 – 2012-11-27 07:01:16

第二個答案是錯誤的。

答案應該是document.getElementById('fileElementId').files.length;而不是document.getElementById('fileElementId').files;。

來源

2017-12-08 11:55:32

Javascript從文件輸入元素獲取多個文件及其文件名具有多個屬性？

回答

相關問題