文件对象的使用方法实例

了解什么是文件对象以及如何使用它

浏览器为我们提供了一个File 对象。

文件对象是一个 Blob对象，它在上面提供了3个属性。

• name (一个字符串)
• lastModified (最后修改日期时间的UNIX时间戳)

其中加起来就是Blob 对象的属性。

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

在与FileList 对象进行交互时，你会收到一个File 对象，它可以从带有<input type="file" /> 元素的HTML表格中获取，或者在与拖放进行交互时。

当你得到一个FileList 对象时，当你在它上面循环时，或者你挑选一个元素（例如第一项有myFileList[0] ），你将得到一个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）在CodePen上的Pen文件对象演示。