<input type="file"> 创建啥文件上传对象或文件列表？

Posted 2023-05-08

【中文标题】<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/…

【参考方案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是选择上传的路径。