HTML5 FileReader讀取Blob對象API詳解


 使用FileReader對象,web應用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數據緩沖)內容,可以使用File對象或者Blob對象來指定所要讀取的文件或數據.其中File對象可以是來自用戶在一個<input>元素上選擇文件后返回的FileList對象,也可以來自由拖放操作生成的 DataTransfer對象,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法后的返回結果。

創建FileReader對象,

var reader = new FileReader();

屬性:

1.result  jsval 讀取的文件內容,這個屬性只在讀取操作完成之后才有效,並且數據的格式取決於讀取操作發起的方法。只讀

2.readyState  unsigned short  當前狀態值,0---EMPTY 還沒有記載任何數據。1--LOADING 正在被記載。2---DONE 已完成全部的讀取請求。

3.error  DOMError 在讀取文件時發生的錯誤,只讀。

方法:

void abort() ,中止讀取操作,返回時,readyState屬性值為DONE

void readAsArrayBuffer( in Blob blob), 讀取文件為 ArrayBuffer

void readAsBinaryString(in Blob blob),讀取文件為二進制字符串,IE瀏覽器不支持該方法

void readAsDataURL(in Blob blob),讀取文件為DataURL ,關於DataURL

void readAsText(in Blob blob,[optional] in DOMString encoding),指定文件編碼(默認值utf-8),讀取Blob為字符串

事件監聽:

onabort 當讀取操作被終止時調用.

onerror 當讀取操作發生錯誤時調用.

onload 當讀取操作成功完成時調用.

onloadend 當讀取操作完成時調用,不管是成功還是失敗.該處理程序在onload或者onerror之后調用.

onloadstart 當讀取操作將要開始之前調用.

onprogress 在讀取數據過程中周期性調用.

事件傳遞的參數對象:

//e.target  FileReader
//e.total   文件總大小,字節
//e.type    上傳狀態‘load’
//e.timeStamp  還不知道

瀏覽器兼容性

Desktop、Mobile

Feature Firefox (Gecko) Chrome Internet Explorer* Opera* Safari
Basic support 3.6 (1.9.2) 7 10 Not supported Not supported

*IE9有一個File API Lab.Opera從11.10開始部分支持該API.

實例1,檢測瀏覽器是否支持FileReader

//1.檢測瀏覽器是否支持FileReader
//測試結果,IE>=10,Google,FF
if (window.FileReader) {
    var fr = new FileReader();
    console.info(fr);
} else {
    alert("Not supported by your browser!");
}

實例2. FileReader讀取File對象,讀取文件實例

<div class="container">
    <input type="file" id="file" multiple />
    <input type="button" id="btn1" value="選擇上傳文件" onclick="showFiles();" />
    <h4>
        選擇文件如下:
    </h4>
    <blockquote></blockquote>
</div>
var fileBox = document.getElementById('file');
function showFiles() {
    //獲取選擇文件的數組
    var fileList = fileBox.files;
    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        readFile(file);
    }
}
//讀取文件內容
//reader.readAsArrayBuffer   //將讀取結果 封裝成 ArrayBuffer ,如果想使用一般需要轉換成 Int8Array或DataView
//reader.readAsBinaryString  //在IE瀏覽器中不支持改方法
//reader.readAsText     該方法有兩個參數,其中第二個參數是文本的編碼方式,默認值為 UTF-8
//reader.readAsDataURL  //讀取結果為DataURL 
//reader.readyState    上傳中的狀態
function readFile(file) {
    var reader = new FileReader();
    //reader.readAsText(file);
    //中文windows系統 txt 文本多數默認編碼 gbk
    reader.readAsText(file, 'gbk');
    console.info(reader.readyState); // 狀態值 1
    reader.onload = function (e) {
        console.info(e); //事件對象
        //e.target  FileReader
        //e.total   文件總大小,字節
        //e.type    上傳狀態‘load’
        //e.timeStamp  還不知道

        console.info(reader.readyState); //狀態值 2
        var result = reader.result;
        $('.container blockquote').text(result);
    }
}

更多實例:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM