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从文件输入元素获取多个文件及其文件名具有多个属性？

回答

相关问题