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;

Answer 3

第二个答案是错误的。

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

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

3 个答案: