HTML5之FileReader的使用

HTML5定義了FileReader做爲文件API的重要成員用於讀取文件，根據W3C的定義，FileReader接口提供了讀取文件的方法和包含讀取結果的事件模型。

FileReader的使用方式很是簡單，能夠按照以下步驟建立FileReader對象並調用其方法：

1.檢測瀏覽器對FileReader的支持

    if(window.FileReader) {  
        var fr = new FileReader();  
        // add your code here  
    }  
    else {  
        alert("Not supported by your browser!");  
    }  

 

2. 調用FileReader對象的方法

FileReader 的實例擁有 4 個方法，其中 3 個用以讀取文件，另外一個用來中斷讀取。下面的表格列出了這些方法以及他們的參數和功能，須要注意的是 ，不管讀取成功或失敗，方法並不會返回讀取結果，這一結果存儲在 result屬性中。

方法名	參數	描述
abort	none	中斷讀取
readAsBinaryString	file	將文件讀取爲二進制碼
readAsDataURL	file	將文件讀取爲 DataURL
readAsText	file, [encoding]	將文件讀取爲文本

readAsText：該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值爲 UTF-8。這個方法很是容易理解，將文件以文本方式讀取，讀取的結果便是這個文本文件中的內容。
readAsBinaryString：該方法將文件讀取爲二進制字符串，一般咱們將它傳送到後端，後端能夠經過這段字符串存儲文件。
readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取爲一段以 data: 開頭的字符串，這段字符串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這裏的小文件一般是指圖像與 html 等格式的文件。

 

3. 處理事件

FileReader 包含了一套完整的事件模型，用於捕獲讀取文件時的狀態，下面這個表格概括了這些事件。

事件	描述
onabort	中斷時觸發
onerror	出錯時觸發
onload	文件讀取成功完成時觸發
onloadend	讀取完成觸發，不管成功或失敗
onloadstart	讀取開始時觸發
onprogress	讀取中

文件一旦開始讀取，不管成功或失敗，實例的 result 屬性都會被填充。若是讀取失敗，則 result 的值爲 null ，不然便是讀取的結果，絕大多數的程序都會在成功讀取文件的時候，抓取這個值。

    fr.onload = function() {  
        this.result;  
    };  

 

下面經過一個上傳圖片預覽和帶進度條上傳來展現FileReader的使用。

    <script type="text/javascript">  
            function showPreview(source) {  
                var file = source.files[0];  
                if(window.FileReader) {  
                    var fr = new FileReader();  
                    fr.onloadend = function(e) {  
                        document.getElementById("portrait").src = e.target.result;  
                    };  
                    fr.readAsDataURL(file);  
                }  
            }  
        </script>  
      
<input type="file" name="file" onchange="showPreview(this)" />  
<img id="portrait" src="" width="70" height="75">  

 

若是要限定上傳文件的類型，能夠經過文件選擇器獲取文件對象並經過type屬性來檢查文件類型

    if(!/image\/\w+/.test(file.type)){  
        alert("請確保文件爲圖像類型");  
        return false;  
    }  

 

不難發現這個檢測是基於正則表達式的，所以能夠進行各類複雜的匹配，很是有用。

若是要增長一個進度條，可使用HTML 5的progress標籤，經過下面的代碼實現。

var h = {  
            init: function() {  
                var me = this;  
                   
                document.getElementById('File').onchange = me.fileHandler;  
                document.getElementById('Abort').onclick = me.abortHandler;  
                   
                me.status = document.getElementById('Status');  
                me.progress = document.getElementById('Progress');  
                me.percent = document.getElementById('Percent');  
                   
                me.loaded = 0;  
                //每次讀取1M  
                me.step = 1024 * 1024;  
                me.times = 0;  
            },  
            fileHandler: function(e) {  
                var me = h;  
                   
                var file = me.file = this.files[0];  
                   
                var reader = me.reader = new FileReader();  
                   
                //  
                me.total = file.size;  
                   
                reader.onloadstart = me.onLoadStart;  
                reader.onprogress = me.onProgress;  
                reader.onabort = me.onAbort;  
                reader.onerror = me.onerror;  
                reader.onload = me.onLoad;  
                reader.onloadend = me.onLoadEnd;  
                //讀取第一塊  
                me.readBlob(file, 0);  
            },  
            onLoadStart: function() {  
                var me = h;  
            },  
            onProgress: function(e) {  
                var me = h;  
                   
                me.loaded += e.loaded;  
                //更新進度條  
                me.progress.value = (me.loaded / me.total) * 100;  
            },  
            onAbort: function() {  
                var me = h;  
            },  
            onError: function() {  
                var me = h;  
                   
            },  
            onLoad: function() {  
                var me = h;  
           
                if(me.loaded < me.total) {  
                    me.readBlob(me.loaded);  
                } else {  
                    me.loaded = me.total;  
                }  
            },  
            onLoadEnd: function() {  
                var me = h;  
                   
            },  
            readBlob: function(start) {  
                var me = h;  
                   
                var blob,  
                    file = me.file;  
                   
                me.times += 1;  
                   
                if(file.webkitSlice) {  
                    blob = file.webkitSlice(start, start + me.step + 1);  
                } else if(file.mozSlice) {  
                    blob = file.mozSlice(start, start + me.step + 1);  
                }  
                   
                me.reader.readAsText(blob);  
            },  
            abortHandler: function() {  
                var me = h;  
                   
                if(me.reader) {  
                    me.reader.abort();  
                }  
            }  
        };  
           
        h.init();