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屬性中。
eadAsText：該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值為 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結果即是這個文本文件中的內容。
readAsBinaryString：該方法將文件讀取為二進制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件。
readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是指圖像與 html 等格式的文件。
下面通過一個上傳圖片預覽和帶進度條上傳來展示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">
if(!/image///w+/.test(file.type)){ alert("請確保文件為圖像類型"); return false; }新聞熱點
疑難解答
