Question

请考虑以下HTML代码段：

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

要在JavaScript中访问此控件，我们可以写：

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

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

你如何解释这个悖论？

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

Answer 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

Answer 2

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

Answer 3

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

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

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

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

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

3 个答案: