javascript中有file對象;file對象代表一個文件,用於讀寫文件訊息,該對象繼承了Blob對象,並擴展了與文件系統相關的功能,所有可以使用Blob對象的場合都可以使用file對象;可以利用「new File(fileParts, fileName, [options])」建構器來取得file物件。

本教學操作環境:windows10系統、javascript1.8.5版、Dell G3電腦。
File 物件
File 物件代表一個文件,用來讀寫文件資訊。它繼承了Blob 對象,或者說是一種特殊的Blob 對象,所有可以使用Blob 物件的場合都可以使用它。
最常見的使用場合是表單的檔案上傳控制項(),使用者選取檔案以後,瀏覽器就會產生一個數組,裡面是每個使用者選取的文件,它們都是File 實例物件。
// HTML 程式碼如下// <input id="fileItem" type="file">var file = document.getElementById('fileItem').files[0];file instanceof File // true上面程式碼中,file是使用者選取的第一個文件,它是File 的實例。
建構函數
瀏覽器原生提供一個File()建構函數,用來產生File 實例物件。
new File(array, name [, options])
File()建構子接受三個參數。
array:一個數組,成員可以是二進位物件或字串,表示檔案的內容。
name:字串,表示檔案名稱或檔案路徑。
options:配置對象,設定實例的屬性。此參數可選。
第三個參數配置對象,可以設定兩個屬性。
type:字串,表示實例物件的MIME 類型,預設值為空字串。
lastModified:時間戳,表示上次修改的時間,預設為Date.now()。
下面是一個例子。
var file = new File( ['foo'], 'foo.txt', { type: 'text/plain', });實例屬性和實例方法
File 物件有以下實例屬性。
File.lastModified:最後修改時間
File.name:檔案名稱或檔案路徑
File.size:檔案大小(單位位元組)
File.type:檔案的MIME 類型
var myFile = new File([], 'file.bin', { lastModified: new Date(2018, 1, 1),});myFile.lastModified // 1517414400000myFile.name // "file.bin"myFile.size / / 0myFile.type // ""上面程式碼中,由於myFile的內容為空,也沒有設定MIME 類型,所以size屬性等於0,type屬性等於空字串。
File 物件沒有自己的實例方法,由於繼承了Blob 對象,因此可以使用Blob 的實例方法slice()。
擴展知識:
有兩種方式可以獲得它。
new File(fileParts, fileName, [options])
fileParts —— Blob/BufferSource/String 類型值的陣列。
fileName —— 檔名字串。
options —— 可選物件:
lastModified —— 最後一次修改的時間戳記(整數日期)。更常見的是,我們從<input type="file">或拖放或其他瀏覽器介面來取得檔案。在這種情況下,file 將從作業系統(OS)獲得this 資訊。
由於File 是繼承自Blob的,所以File 物件具有相同的屬性,附加:
name —— 檔案名,lastModified —— 最後一次修改的時間戳記。這就是我們從<input type="file"> 中取得File 物件的方式:
<input type="file" onchange="showFile(this)"><script>function showFile(input) { let file = input.files[0]; alert(`File name: ${file.name}`); // 例如my.png alert(`Last modified: ${file.lastModified}`); // 例如1552830408824}</script>詳細點:
請注意:
輸入(input)可以選擇多個文件,因此input.files 是一個類別數組物件。這裡我們只有一個文件,所以我們只取input.files[0]。