/

File物件

File物件

了解什麼是File物件以及如何使用它

瀏覽器提供了一個File物件。

文件物件是一個Blob物件，它提供了3個額外的屬性：

  • name（一個字串）
  • lastModified（最後修改的UNIX時間戳記）

加上了Blob物件的屬性：

  • size（文件大小（以位元組為單位））
  • type（文件的MIME類型）

當你與FileList物件進行交互時，你將會收到一個File物件。可以通過HTML表單的<input type="file" />元素獲取FileList物件，或者通過**拖放(Drag and Drop)**進行交互。

當你獲取了一個FileList物件後，你可以遍歷它，或者選擇其中的元素（例如使用myFileList[0]獲取第一個項目），這樣你就可以獲取到一個File物件。

假設你的表單中有一個input type="file"元素：

1
<input type="file" />

現在，你可以監聽這個元素的change事件，這樣當你選擇一個文件時，就可以獲取有關它的信息。document.querySelector('input').files將返回一個FileList物件，就像之前解釋的一樣，使用[0]可以獲取到第一個已加載的文件，然後我們可以從File物件中獲取所有需要的屬性：

1
2
3
4
document.querySelector('input').addEventListener('change', () => {
 const file = document.querySelector('input').files[0]
 alert(`文件${file.name}最後修改時間為${new Date(file.lastModified).toDateString()}`)
})

參見File物件範例，Flavio Copes的示例。

tags: [“File物件”, “Blob物件”, “MIME類型”, “拖放”]