Javascript从具有多个属性的文件输入元素获取文件数量及其文件名？

Question

我有一个带有multiple="multiple"属性的文件输入,允许用户一次选择多个文件.我想在上传之前显示所选的文件名及其计数但是我不知道如何使用javascript从文件输入元素获取此信息？

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

我试过这个:

document.getElementById('fileElementId').value

但是,当我选择多个文件时,这只返回一个文件名.使用JavaScript是如何从具有multiple属性的文件输入元素中检索所选文件及其名称的数量？

Answer 1

在支持HTML5文件内容的新浏览器中,您的<input>元素将具有"files"属性.这将为您提供一个"FileList"引用,它具有".length"属性.在"FileList"实例上还有一个名为".item()"的访问方法,它需要一个整数arg来访问单个"File"元素.那些有".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支持的彻底程度; 但是,如果您正在编写文件中设置了"多个"的页面,那么您已经在边缘跳舞了:-)

Answer 2

这是未经测试的,但您可以尝试:

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

要么

    document.getElementById('fileElementId').files;