您好,登錄后才能下訂單哦!
這篇文章主要介紹HTML5中FileReader對(duì)象怎么用,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
寫在前面
前一篇文章介紹了HTML5中的Blob對(duì)象(詳情戳這里),從中了解到Blob對(duì)象只是二進(jìn)制數(shù)據(jù)的容器,本身并不能操作二進(jìn)制,故本篇將對(duì)其操作對(duì)象FileReader進(jìn)行介紹。
FileReader
FileReader主要用于將文件內(nèi)容讀入內(nèi)存,通過一系列異步接口,可以在主線程中訪問本地文件。
使用FileReader對(duì)象,web應(yīng)用程序可以異步的讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容,可以使用File對(duì)象或者Blob對(duì)象來指定所要處理的文件或數(shù)據(jù)。
創(chuàng)建實(shí)例
var reader = new FileReader();
方法
方法定義 | 描述 |
---|---|
abort():void | 終止文件讀取操作 |
readAsArrayBuffer(file):void | 異步按字節(jié)讀取文件內(nèi)容,結(jié)果用ArrayBuffer對(duì)象表示 |
readAsBinaryString(file):void | 異步按字節(jié)讀取文件內(nèi)容,結(jié)果為文件的二進(jìn)制串 |
readAsDataURL(file):void | 異步讀取文件內(nèi)容,結(jié)果用data:url的字符串形式表示 |
readAsText(file,encoding):void | 異步按字符讀取文件內(nèi)容,結(jié)果用字符串形式表示 |
事件
事件名稱 | 描述 |
---|---|
onabort | 當(dāng)讀取操作被中止時(shí)調(diào)用 |
onerror | 當(dāng)讀取操作發(fā)生錯(cuò)誤時(shí)調(diào)用 |
onload | 當(dāng)讀取操作成功完成時(shí)調(diào)用 |
onloadend | 當(dāng)讀取操作完成時(shí)調(diào)用,不管是成功還是失敗 |
onloadstart | 當(dāng)讀取操作將要開始之前調(diào)用 |
onprogress | 在讀取數(shù)據(jù)過程中周期性調(diào)用 |
使用方法
FileReader通過異步的方式讀取文件內(nèi)容,結(jié)果均是通過事件回調(diào)獲取,下面是一個(gè)讀取本地txt文件內(nèi)容的例子:
var input = document.getElementById("file"); //input file input.onchange = function(){ var file = this.files[0]; if(!!file){ //讀取本地文件,以gbk編碼方式輸出 var reader = new FileReader(); reader.readAsText(file,"gbk"); reader.onload = function(){ //讀取完畢后輸出結(jié)果 console.log(this.result); } } }
此外我們還可以通過注冊(cè)onprogress、onerror等事件,記錄文件讀取進(jìn)度或異常行為等等。
讀取方式
FileReader提供了四種不同的讀取文件的方式,如:readAsArrayBuffer會(huì)將文件內(nèi)容讀取為ArrayBuffer對(duì)象,readAsBinaryString則將文件讀取為二進(jìn)制串,下面對(duì)這四種方式進(jìn)行簡(jiǎn)單區(qū)分。
首先準(zhǔn)備一張圖片(6764 字節(jié))和一個(gè)txt文本(51字節(jié))作為測(cè)試文件:
接著編寫測(cè)試代碼:
var reader = new FileReader(); // 通過四種方式讀取文件 //reader.readAsXXX(file); reader.onload = function(){ //查看文件輸出內(nèi)容 console.log(this.result); //查看文件內(nèi)容字節(jié)大小 console.log(new Blob([this.result])) }
readAsDataURL
查看圖片輸出結(jié)果:
查看txt輸出結(jié)果:
很明顯,readAsDataURL會(huì)將文件內(nèi)容進(jìn)行base64編碼后輸出,這個(gè)很好區(qū)分。
readAsText
此方法可以通過不同的編碼方式讀取字符,我們使用utf-8
讀取
查看圖片輸出結(jié)果:
查看txt輸出結(jié)果:
readAsText讀取文件的單位是字符,故對(duì)于文本文件,只要按規(guī)定的編碼方式讀取即可;
而對(duì)于媒體文件(圖片、音頻、視頻),其內(nèi)部組成并不是按字符排列,故采用readAsText讀取,會(huì)產(chǎn)生亂碼,同時(shí)也不是最理想的讀取文件的方式
readAsBinaryString
查看圖片輸出結(jié)果:
查看txt輸出結(jié)果:
與readAsText不同的是,readAsBinaryString函數(shù)會(huì)按字節(jié)讀取文件內(nèi)容。
然而諸如0101的二進(jìn)制數(shù)據(jù)只能被機(jī)器識(shí)別,若想對(duì)外可見,還是需要進(jìn)行一次編碼,而readAsBinaryString的結(jié)果就是讀取二進(jìn)制并編碼后的內(nèi)容。
盡管readAsBinaryString方法可以按字節(jié)讀取文件,但由于讀取后的內(nèi)容被編碼為字符,大小會(huì)受到影響,故不適合直接傳輸,也不推薦使用。
如:測(cè)試的圖片文件原大小為6764 字節(jié),而通過readAsBinaryString讀取后,內(nèi)容被擴(kuò)充到10092個(gè)字節(jié)
readAsArrayBuffer
查看圖片輸出結(jié)果:
查看txt輸出結(jié)果:
與readAsBinaryString類似,readAsArrayBuffer方法會(huì)按字節(jié)讀取文件內(nèi)容,并轉(zhuǎn)換為ArrayBuffer對(duì)象。
我們可以關(guān)注下文件讀取后大小,與原文件大小一致。
這也就是readAsArrayBuffer與readAsBinaryString方法的區(qū)別,readAsArrayBuffer讀取文件后,會(huì)在內(nèi)存中創(chuàng)建一個(gè)ArrayBuffer對(duì)象(二進(jìn)制緩沖區(qū)),將二進(jìn)制數(shù)據(jù)存放在其中。通過此方式,我們可以直接在網(wǎng)絡(luò)中傳輸二進(jìn)制內(nèi)容。
好了說這么多,那ArrayBuffer到底是個(gè)毛?
關(guān)于ArrayBuffer對(duì)象牽涉的知識(shí)點(diǎn)比較多,完全可以單開一篇細(xì)說,在此只要簡(jiǎn)單理解為存放了一段二進(jìn)制數(shù)據(jù)的內(nèi)存空間即可。
而本身ArrayBuffer中的內(nèi)容對(duì)外是不可見的,若要查看其中的內(nèi)容,就要引入另一個(gè)概念:類型化數(shù)組
我們可以嘗試查看下剛剛通過readAsArrayBuffer方法讀取的圖片文件內(nèi)容:
可以看到,整個(gè)圖片文件的6764個(gè)字節(jié),被分別存儲(chǔ)在長(zhǎng)度為6764的數(shù)組中,而數(shù)組中每一個(gè)元素的值,為當(dāng)前字節(jié)的十進(jìn)制數(shù)值。
關(guān)于ArrayBuffer和類型化數(shù)組的概念在此不做深入解釋,之后會(huì)再寫一篇單獨(dú)討論。
應(yīng)用場(chǎng)景
說了這么多,最后還是要落實(shí)到FileReader能解決什么問題,下面通過幾個(gè)例子說明:
在線預(yù)覽本地文件
我們知道,img的src屬性或background的url屬性,可以通過被賦值為圖片網(wǎng)絡(luò)地址或base64的方式顯示圖片。
在文件上傳中,我們一般會(huì)先將本地文件上傳到服務(wù)器,上傳成功后,由后臺(tái)返回圖片的網(wǎng)絡(luò)地址再在前端顯示。
通過FileReader的readAsDataURL方法,我們可以不經(jīng)過后臺(tái),直接將本地圖片顯示在頁面上。這樣做可以減少前后端頻繁的交互過程,減少服務(wù)器端無用的圖片資源,代碼如下:
var input = document.getElementById("file"); // input file input.onchange = function(){ var file = this.files[0]; if(!!file){ var reader = new FileReader(); // 圖片文件轉(zhuǎn)換為base64 reader.readAsDataURL(file); reader.onload = function(){ // 顯示圖片 document.getElementById("file_img").src = this.result; } } }
運(yùn)行效果如下:
對(duì)于圖片上傳,我們也可以先將圖片轉(zhuǎn)換為base64進(jìn)行傳輸,此時(shí)由于傳輸?shù)膱D片內(nèi)容就是一段字符串,故上傳接口可以當(dāng)做普通post接口處理,當(dāng)圖片傳輸?shù)胶笈_(tái)后,可以在轉(zhuǎn)換為文件實(shí)體存儲(chǔ)。
當(dāng)然,考慮到base64轉(zhuǎn)換效率及其本身的大小,本方法還是適合于上傳內(nèi)容簡(jiǎn)單或所占內(nèi)存較小的文件。
二進(jìn)制數(shù)據(jù)上傳
HTML5體系的建立引入了一大堆新的東西,基于XHR2,我們可以直接上傳或下載二進(jìn)制內(nèi)容,無需像以往一樣通過form標(biāo)簽由后端拉取二進(jìn)制內(nèi)容。
簡(jiǎn)單整理下上傳邏輯:
1、通過input[type="file"]標(biāo)簽獲取本地文件File對(duì)象
2、通過FileReader的readAsArrayBuffer方法將File對(duì)象轉(zhuǎn)換為ArrayBuffer
3、創(chuàng)建xhr對(duì)象,配置請(qǐng)求信息
4、通過xhr.sendAsBinary直接將文件的ArrayBuffer內(nèi)容裝填至post body后發(fā)送
代碼實(shí)現(xiàn)如下:
var input = document.getElementById("file"); // input file input.onchange = function(){ var file = this.files[0]; if(!!file){ var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function(){ var binary = this.result; upload(binary); } } } //文件上傳 function upload(binary){ var xhr = new XMLHttpRequest(); xhr.open("POST", "http://xxxx/opload"); xhr.overrideMimeType("application/octet-stream"); //直接發(fā)送二進(jìn)制數(shù)據(jù) if(xhr.sendAsBinary){ xhr.sendAsBinary(binary); }else{ xhr.send(binary); } // 監(jiān)聽變化 xhr.onreadystatechange = function(e){ if(xhr.readyState===4){ if(xhr.status===200){ // 響應(yīng)成功 } } } }
以上是“HTML5中FileReader對(duì)象怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。