文件对象

找出什么是File对象以及如何使用它

浏览器为我们提供了File目的。

File对象是一个斑点对象,并在其之上提供3个属性:

这加起来Blob对象属性:

  • size(以字节为单位的大小)
  • type(MIME类型)

您会收到一个File与对象互动时FileList对象,可以使用以下命令从HTML表单中检索该对象:<input type="file" />元素,或与之互动时拖放

当你得到一个FileList对象,当您在其上循环或选择一个元素时(例如,带有myFileList[0])你会得到一个File目的。

说你有一个input type="file"表单中的元素:

<input type="file" />

现在您可以收听change事件在此元素上发生,因此,当您选择文件时,您将获得有关该文件的信息。document.querySelector('input').files将返回一个FileList对象,如上文所述,并使用[0]我们将加载第一个文件,然后我们可以从中访问所需的所有属性File目的:

document.querySelector('input').addEventListener('change', () => {
  const file = document.querySelector('input').files[0]
  alert(`The file ${file.name} was last modified on ${new Date(file.lastModified).toDateString()}`)
})

看笔文件对象演示由Flavio Copes(@flaviocopes) 在密码笔

Tech Wiki Online!