Why "HTML <input type='file' />" has

Why "HTML <input type='file' />" has "files" property in JavaScript?

本文关键字：quot file has gt input HTML lt Why type 更新时间：2023-09-26

考虑以下HTML片段:

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

要在JavaScript中访问这个控件，可以这样写:

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

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

你如何解释这个悖论?

更新:我建立这个jsfiddle是为了看到其中一个答案在行动

在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

根据Gecko DOM参考，它只适用于通过拖放方式使用文件上传元素

这样我们就可以在客户端读取这样选择的文件的内容:

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实现了这些。