为什么“HTML <input type='file' />”在 JavaScript 中有“files”属性？答案

【问题标题】：Why "HTML <input type='file' />" has "files" property in JavaScript?为什么“HTML <input type='file' />”在 JavaScript 中有“files”属性？
【发布时间】：2011-11-15 19:50:14
【问题描述】：

考虑一下这个 HTML sn-p：

<input type='file' id='fileUpload' />

要在 JavaScript 中访问这个控件，我们可以这样写：

var temp = document.getElementById('fileUpload');

好吧，别生气，我知道你们都知道。但有趣的是，temp 变量现在有一个名为files 的属性（不是file，而是files，复数形式），其类型为@ 987654326@，当然是File对象的列表。这语义应该意味着通过一个且只有一个 HTML文件上传控件上传多个文件应该是可能的。但是，您不能通过这种方式上传多个文件，并且有很多变通方法，而不是直接使用。

你如何解释这个悖论？

更新：我构建了这个 jsfiddle 来查看其中一个答案。

【问题讨论】：

如果文件输入被命名为一个数组（例如file[]），那么文件是否会全部归入一个FileList？
@Dani，我真的很高兴听到你的好消息。我认为这是不可能的。但我真的很喜欢听到它可能。

标签： javascript html file upload

【解决方案1】：

在 HTML5 中，multiple 属性指定可以为输入字段选择多个值。

<input type='file' multiple='multiple' />

这些链接应该会有所帮助：

http://www.w3schools.com/html5/html5_form_attributes.asp

http://rakaz.nl/2009/08/uploading-multiple-files-using-html5.html

【讨论】：

我刚退出就看到了。所以，从技术上讲，这意味着多个文件将通过 HTTP Post 发送，是吗？

【解决方案2】：

根据Gecko DOM Reference，它只适用于通过拖放使用文件上传元素时。

【讨论】：

不，这不是真的。它说“它也被使用了”（强调我的）。

【解决方案3】：

这样我们就可以在客户端上读取以这种方式选择的文件的内容：

https://developer.mozilla.org/en/Using_files_from_web_applications

这在 Firefox 3.0 版本中是可能的。当时我写了一篇关于如何进行真正的 Ajax 文件上传的文章：http://igstan.ro/posts/2009-01-11-ajax-file-upload-with-pure-javascript.html

现在，Firefox 3.0 API 已被删除。相反，您应该使用 FileReader 和 FormData 对象。这应该适用于最新的浏览器版本。我还没有进行广泛的研究，但我相信没有任何版本的 IE 实现了这些。

【讨论】：