HTML5的File API有哪些對(duì)象

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

File API包含如下對(duì)象。

? FileList接口。

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

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

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

? Blob接口。

Blob（Binary Large Object）指二進(jìn)制大對(duì)象，代表文件原始的二進(jìn)制數(shù)據(jù)。

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

? File接口。

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

? FileReader接口。

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

? FileError和FileException。

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

1. 以前的同類解決方案

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

2. File API的優(yōu)點(diǎn)

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

3. 檢測(cè)瀏覽器是否支持File API

判斷當(dāng)前瀏覽器是否支持File API的代碼如下：

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

//此瀏覽器不支持File API

}

4. 讀取文件函數(shù)

File API讀取文件主要包括以下函數(shù):

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

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

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

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

上面函數(shù)的參數(shù)也可以是File對(duì)象，因?yàn)镕ile繼承自Blob接口。

5. 一個(gè)簡(jiǎn)單實(shí)例

結(jié)合前面介紹過的拖放API，我們實(shí)現(xiàn)一個(gè)圖片拖放并展示的簡(jiǎn)單示例，詳細(xì)功能是從Windows文件系統(tǒng)中拖放一幅圖片文件到瀏覽器頁面里，頁面將會(huì)把這幅圖片的邊緣加上白色虛化效果并顯示出來。

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

這個(gè)實(shí)例的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); /* 實(shí)現(xiàn)虛化效果的遮罩圖片 */

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

Mask */

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

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

}

#box.hover{ /* 將鼠標(biāo)拖曳到容器上時(shí)的樣式 */

border: 2px olive solid;

}

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

border: 2px blue solid;

}

這個(gè)實(shí)例的JavaScript代碼如下所示：

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

//檢測(cè)是否支持File API

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

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

}

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

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

this.className = 'hover';

event.dataTransfer.dropEffect = "copy";

return false;

};

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

this.innerHTML = '';

this.className = '';

return false;

}

box.ondragend = function(){ //拖曳結(jié)束時(shí)

this.className = '';

return false;

};

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

this.innerHTML = '';

this.className = 'drop';

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

//文件對(duì)象

var reader = new FileReader();

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

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

//將讀取到的圖像內(nèi)容設(shè)置為容器的背景

};

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

alert(event.target.error.code);

}

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

event.preventDefault();

};

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

拖放時(shí)的實(shí)際效果表現(xiàn)為，當(dāng)拖曳圖片到框內(nèi)時(shí)，邊框變?yōu)殚蠙焐珜?shí)線，框內(nèi)文字顯示“可以拖曳到此處”；再把圖片拖曳出框外時(shí)，邊框還原為最初的灰色虛線框，框內(nèi)文字消失；將圖片放置到框里后，邊框變?yōu)樗{(lán)色實(shí)線框，圖片的邊緣呈現(xiàn)白色虛化效果。你可以將多幅圖片拖曳到框內(nèi)來查看它們經(jīng)過邊緣白色虛化處理后的效果圖，非常方便實(shí)用。

可能犯的4個(gè)錯(cuò)誤

(1) onerror事件參數(shù)處理錯(cuò)誤

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

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

? SECURITY_ERR（值為2，安全權(quán)限的錯(cuò)誤）

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

? NOT_READABLE_ERR（值為4，不可讀的錯(cuò)誤）

? ENCODING_ERR（值為5，編碼錯(cuò)誤）

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

在本地Web頁面中調(diào)用File API是無法讀取到文件內(nèi)容的，HTML5的安全機(jī)制對(duì)此進(jìn)行了控制。在本地頁面調(diào)用File API時(shí)，在FileReader的onerror事件中可以捕獲到的錯(cuò)誤碼為2，對(duì)應(yīng)上面提到的SECURITY_ERR，表示是文件安全權(quán)限導(dǎo)致的錯(cuò)誤。

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

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

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

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

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

讀到這里，這篇“HTML5的File API有哪些對(duì)象”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。