javascript中有file對(duì)象；file對(duì)象代表一個(gè)文件，用于讀寫文件信息，該對(duì)象繼承了Blob對(duì)象，并擴(kuò)展了與文件系統(tǒng)相關(guān)的功能，所有可以使用Blob對(duì)象的場(chǎng)合都可以使用file對(duì)象；可以利用“new File(fileParts, fileName, [options])”構(gòu)造器來(lái)獲取file對(duì)象。

本教程操作環(huán)境：windows10系統(tǒng)、javascript1.8.5版、Dell G3電腦。

javascript中有file對(duì)象

File 對(duì)象

File 對(duì)象代表一個(gè)文件，用來(lái)讀寫文件信息。它繼承了 Blob 對(duì)象，或者說(shuō)是一種特殊的 Blob 對(duì)象，所有可以使用 Blob 對(duì)象的場(chǎng)合都可以使用它。

最常見(jiàn)的使用場(chǎng)合是表單的文件上傳控件（），用戶選中文件以后，瀏覽器就會(huì)生成一個(gè)數(shù)組，里面是每一個(gè)用戶選中的文件，它們都是 File 實(shí)例對(duì)象。

// HTML 代碼如下 // <input id="fileItem" type="file"> var file = document.getElementById('fileItem').files[0]; file instanceof File // true

上面代碼中，file是用戶選中的第一個(gè)文件，它是 File 的實(shí)例。

構(gòu)造函數(shù)

瀏覽器原生提供一個(gè)File()構(gòu)造函數(shù)，用來(lái)生成 File 實(shí)例對(duì)象。

new File(array, name [, options])

File()構(gòu)造函數(shù)接受三個(gè)參數(shù)。

array：一個(gè)數(shù)組，成員可以是二進(jìn)制對(duì)象或字符串，表示文件的內(nèi)容。

name：字符串，表示文件名或文件路徑。

options：配置對(duì)象，設(shè)置實(shí)例的屬性。該參數(shù)可選。

第三個(gè)參數(shù)配置對(duì)象，可以設(shè)置兩個(gè)屬性。

type：字符串，表示實(shí)例對(duì)象的 MIME 類型，默認(rèn)值為空字符串。

lastModified：時(shí)間戳，表示上次修改的時(shí)間，默認(rèn)為Date.now()。

下面是一個(gè)例子。

var file = new File(   ['foo'],   'foo.txt',   {     type: 'text/plain',   } );

實(shí)例屬性和實(shí)例方法

File 對(duì)象有以下實(shí)例屬性。

File.lastModified：最后修改時(shí)間

File.name：文件名或文件路徑

File.size：文件大?。▎挝蛔止?jié)）

File.type：文件的 MIME 類型

var myFile = new File([], 'file.bin', {   lastModified: new Date(2018, 1, 1), }); myFile.lastModified // 1517414400000 myFile.name // "file.bin" myFile.size // 0 myFile.type // ""

上面代碼中，由于myFile的內(nèi)容為空，也沒(méi)有設(shè)置 MIME 類型，所以size屬性等于0，type屬性等于空字符串。

File 對(duì)象沒(méi)有自己的實(shí)例方法，由于繼承了 Blob 對(duì)象，因此可以使用 Blob 的實(shí)例方法slice()。

擴(kuò)展知識(shí)：

有兩種方式可以獲取它。

第一種，與 Blob 類似，有一個(gè)構(gòu)造器：

new File(fileParts, fileName, [options])

• fileParts —— Blob/BufferSource/String 類型值的數(shù)組。

• fileName —— 文件名字符串。

• options —— 可選對(duì)象：

  • lastModified —— 最后一次修改的時(shí)間戳（整數(shù)日期）。

第二種，input 標(biāo)簽

更常見(jiàn)的是，我們從 <input type="file">或拖放或其他瀏覽器接口來(lái)獲取文件。在這種情況下，file 將從操作系統(tǒng)（OS）獲得 this 信息。

由于 File 是繼承自 Blob的，所以 File 對(duì)象具有相同的屬性，附加：

• name —— 文件名，
• lastModified —— 最后一次修改的時(shí)間戳。

這就是我們從 <input type="file"> 中獲取 File 對(duì)象的方式：

<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>

詳細(xì)點(diǎn)：

請(qǐng)注意：

輸入（input）可以選擇多個(gè)文件，因此 input.files 是一個(gè)類數(shù)組對(duì)象。這里我們只有一個(gè)文件，所以我們只取
input.files[0]。

【