HTML5的File API有哪些對象

本文小編為大家詳細介紹“HTML5的File API有哪些對象”，內容詳細，步驟清晰，細節處理妥當，希望這篇“HTML5的File API有哪些對象”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

File API包含如下對象。

? FileList接口。

它包含一組File對象，所以我們一般通過它來獲取文件。有兩種方式可以得到FileList對象：第一種是通過<input type="file">標簽，

例如var fileList =document.getElementById('input-file').files可以獲取選擇的所有文件對象；

而Drag & Drop API的dataTransfer也包含一個FileList對象，在后面的例子中你將會看到如何通過這種方式來讀取文件。

? Blob接口。

Blob（Binary Large Object）指二進制大對象，代表文件原始的二進制數據。

Blog接口的size屬性表示二進制流的大小，type屬性表示文件類型，而slice函數用來分割Blob對象。

? File接口。

它繼承自Blob接口，描述FileList里的一個文件，包含了文件的只讀信息。它的name屬性表示文件名，lastModifiedDate屬性表示文件的上次修改時間。

? FileReader接口。

它提供了方法來讀取文件，還提供了獲取讀取數據的事件模型。

? FileError和FileException。

它們定義了File API使用中的錯誤和異常。

1. 以前的同類解決方案

在以前，JavaScript是不允許訪問本地文件的。要實現文件上傳這樣的功能，必須借助于瀏覽器的特定插件，例如IE里的ActiveX或者Flash。

2. File API的優點

File API提供了多種Web應用對本地文件的操作，并通過沙箱機制保證了操作的安全性。使用File API，我們的Web應用不需要再考慮所有瀏覽器的兼容性，代碼的編寫和維護變得更加容易。

3. 檢測瀏覽器是否支持File API

判斷當前瀏覽器是否支持File API的代碼如下：

if(typeof window.FileReader === 'undefined'){

//此瀏覽器不支持File API

}

4. 讀取文件函數

File API讀取文件主要包括以下函數:

? readAsBinaryString(blob)。該函數接受一個Blob對象作為參數，通過二進制字符串形式讀取文件內容。

? readAsText(blob)。該函數接受一個Blob對象作為參數，通過文本方式讀取文件內容，默認采用UTF-8的編碼方式。

? readAsDataURL(blob)。該函數接受一個Blob對象作為參數，通過加密的Data URL方式讀取文件內容。Data URL協議由RFC2397定義，具體可以參考http://www.ietf.org/rfc/rfc2397.txt。如果要直接在頁面里顯示圖片，一般采用readAsDataURL讀取圖片內容，后面的示例采用了這種方式。

? readAsArrayBuffer(blob)。該函數接受一個Blob對象作為參數，并以ArrayBuffer對象的形式讀取文件內容。

上面函數的參數也可以是File對象，因為File繼承自Blob接口。

5. 一個簡單實例

結合前面介紹過的拖放API，我們實現一個圖片拖放并展示的簡單示例，詳細功能是從Windows文件系統中拖放一幅圖片文件到瀏覽器頁面里，頁面將會把這幅圖片的邊緣加上白色虛化效果并顯示出來。

在這個示例里，我們將用到HTML5的File API和Drag & Drop API，以及css3的Mask特性。

這個實例的HTML和CSS代碼如代碼如下：

<div id="box"></div>

#box{ /* 容器基本樣式 */

border: 2px gray dotted;

width: 171px;

height: 158px;

line-height: 158px;

text-align: center;

mask-image: url(mask.png); /* 實現虛化效果的遮罩圖片 */

-webkit-mask-image: url(mask.png); /* Mask的WebKit兼容寫法，目前僅WebKit內核瀏覽器支持

Mask */

mask-clip: content; /* 控制遮罩圖片的顯示區域，不擋住邊框，可以去掉試試是什么效果*/

-webkit-mask-clip: content; /* Mask的WebKit兼容寫法，目前僅WebKit內核瀏覽器支持Mask */

}

#box.hover{ /* 將鼠標拖曳到容器上時的樣式 */

border: 2px olive solid;

}

#box.drop{ /*放置圖片后的容器樣式 */

border: 2px blue solid;

}

這個實例的JavaScript代碼如下所示：

var box = document.getElementById('box');

//檢測是否支持File API

if(typeof window.FileReader === 'undefined'){

alert('此瀏覽器不支持File API ');

}

box.ondragover = function(event){ //將鼠標拖曳到容器上時

this.innerHTML = '可以拖曳到此處';

this.className = 'hover';

event.dataTransfer.dropEffect = "copy";

return false;

};

box.ondragleave = function(){ //移出時

this.innerHTML = '';

this.className = '';

return false;

}

box.ondragend = function(){ //拖曳結束時

this.className = '';

return false;

};

box.ondrop = function(event){ //拖曳進行中

this.innerHTML = '';

this.className = 'drop';

var file = event.dataTransfer.files[0]; //通過Drag & Drop API的dataTransfer獲取

//文件對象

var reader = new FileReader();

reader.onload = function (event){ //讀取成功后

box.style.background = 'url(' + event.target.result + ') no-repeat center';

//將讀取到的圖像內容設置為容器的背景

};

reader.onerror = function(event){ //讀取失敗的操作

alert(event.target.error.code);

}

reader.readAsDataURL(file); //用DataURL的方式讀取文件

event.preventDefault();

};

拖放前的框、拖放中的框、拖放后的框效果如下圖所示：

拖放時的實際效果表現為，當拖曳圖片到框內時，邊框變為橄欖色實線，框內文字顯示“可以拖曳到此處”；再把圖片拖曳出框外時，邊框還原為最初的灰色虛線框，框內文字消失；將圖片放置到框里后，邊框變為藍色實線框，圖片的邊緣呈現白色虛化效果。你可以將多幅圖片拖曳到框內來查看它們經過邊緣白色虛化處理后的效果圖，非常方便實用。

可能犯的4個錯誤

(1) onerror事件參數處理錯誤

onerror事件接受的參數是event事件，而不是error對象，要獲得錯誤信息，可以使用event.target.error.code，它有如下幾種類型。

? NOT_FOUND_ERR（值為1，文件未找到的錯誤）

? SECURITY_ERR（值為2，安全權限的錯誤）

? ABORT_ERR（值為3，讀取操作放棄的錯誤）

? NOT_READABLE_ERR（值為4，不可讀的錯誤）

? ENCODING_ERR（值為5，編碼錯誤）

(2) 在本地Web頁面中調用File API

在本地Web頁面中調用File API是無法讀取到文件內容的，HTML5的安全機制對此進行了控制。在本地頁面調用File API時，在FileReader的onerror事件中可以捕獲到的錯誤碼為2，對應上面提到的SECURITY_ERR，表示是文件安全權限導致的錯誤。

如果要自己動手編寫File API的示例，必須記得將頁面放在用Apache或者IIS等搭建的Web服務器上。

(3) 沒有阻止瀏覽器默認行為

dragover和dragend事件都必須使用event.preventDefault或者return false的方式（熟悉JavaScript的朋友應該很了解這兩者之間的差異）來阻止瀏覽器的默認行為。如果不采用這樣的方式，拖放后瀏覽器將會打開并顯示所拖曳的圖片。

(4) 使用非WebKit內核瀏覽器打開示例頁面

CSS3的Mask效果目前只能在WebKit內核瀏覽器中正常顯示，其他現代瀏覽器可以支持圖片拖放的相關功能，但是無法看到圖片邊緣的白色虛化效果。

讀到這里，這篇“HTML5的File API有哪些對象”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。