使用Jquery訪問多個文件

Question

我正在使用HTML 5多文件功能來選擇多個文件上傳。這些文件以$_FILES變量中的一組文件形式出現。我想使用jQuery來獲取點擊上傳按鈕之前列出的文件的所有名稱。

<input class="pictures-upload" name="multiplePhotos[]" type="file" multiple="multiple" /> 

我想追加一個onchange事件，當一個人點擊上傳文件並選擇多個文件，它會採取所有文件的名稱，並追加它放在HTML的身體。我正在使用

$('.upload_button').live('change', function() { 
    var li = $('<li />').text($(this).val()), 
    $('#body').append(li); 

}); 

這隻需要選擇最後一個文件。我如何獲取所有文件？

Answer 1

輸入元素具有「文件」的本機屬性，該文件是FileList類型（即，File的序列）。如果你看看File元素的W3規範，你會發現你可以訪問哪些屬性。

不過，長話短說，jQuery val方法不會返回你想要的。由於'文件'是輸入元素的本地屬性，因此可以使用this.files直接訪問它。然後，只需遍歷數組以獲取File對象，您可以獲取有關信息（名稱，大小，類型等）。

for (var i = 0; i < this.files.length; i++) { 
    var file = this.files[i]; 
    $fileList.append('<li>' + file.name + '</li>'); 
} 

在這裏尋找它的的jsfiddle：http://jsfiddle.net/jonathon/bdbXk/