<input type="file"> 创建什么文件上传对象或文件列表？答案

【问题标题】：What does <input type="file">create, a FileUpload Object or a FileList?<input type="file"> 创建什么文件上传对象或文件列表？
【发布时间】：2013-07-09 23:59:16
【问题描述】：

在 HTML 文件中，我写道：

<input type="file" id="xmlfile" onchange="handleFiles(this)"/>.

W3School 说“对于 HTML 表单中的每个标签，都会创建一个 FileUpload 对象。”而且我确实通过使用JS脚本中的代码成功获取了文件的路径：

function handleFiles(iFile){ var path = iFile.value; }

但有另一种观点认为<input type="file"> 返回一个文件列表。我很迷惑。如果它返回一个文件列表，那么还有一个路径列表。在这种情况下，“iFile.value”是什么意思？文件路径列表？提前致谢。

【问题讨论】：

w3fools 说了很多话。有时他们甚至可能是对的，同样是一个坏了的时钟每天正确两次。
在您的情况下，您允许上传单个文件。因此，value 属性是该文件的文件名。如果您在标签中添加了multiple="multiple"，则可以选择多个文件（在支持它的浏览器中）。如果您选择多个，iFile.value 的结果将是第一个选定文件的文件名。如果您想访问在这种情况下选择的所有文件，您可以循环访问iFile.files 集合（在支持它的浏览器中），即FileList（您可以将其视为一个数组）。您仍然可以在没有 multiple 属性的情况下访问 iFile.files
感谢 Lan 和 Talisfang，您的回答都很有帮助。实际上，iFile 本身就是一个 FileUpload 对象。 filelist 由 ifile.files 返回。我试过了，这是真的。这是Mozilla给出的解释：developer.mozilla.org/en-US/docs/Web/API/…

标签： javascript html file-upload file-io filelist

【解决方案1】：

console.log(object)是我在Chrome开发者工具中用来查看Javascript对象的函数。

  function handleFiles(iFile) {
            var path = iFile.value;
            console.log(iFile);
            console.log(path);
  }

这是输出：

<input type="file" id="xmlfile" onchange="handleFiles(this)">
C:\fakepath\README

从这里我们可以说<input type="file">或iFile参数返回一个FileUpload对象，iFile.value是选择上传的路径。

【讨论】：