FileReader讀取本地文件
FileReader是一種異步讀取文件機制，結合input:file可以很方便的讀取本地文件。
一、input:type[file]
file類型的input會渲染為一個按鈕和一段文字。點擊按鈕可打開文件選擇窗口，文字表示對文件的描述（大部分情況下為文件名）。file類型的input會有files屬性，保存著文件的相關信息。
<input type="file" name="" id="fileBox">
點擊按鈕，上傳一個文件後,在控制臺輸入inputElement.files，打印文件信息：
lastModified:數值,表示最近一次修改時間的毫秒數;
lastModifiedDate:對象,表示最後一次表示最近一次修改時間的Date對象;
name:本地文件系統中的文件名;
size:文件的字節大小;
type:字符串,文件的MIME類型;
webkitRelativePath:此處為空;當在input上加上webkitdirectory屬性時，用戶可選擇文件夾，此時weblitRelativePath表示文件夾中文件的相對路徑。比如：
<input type="file" id="inputBox" webkitdirectory>
點擊按鈕添加一個包含3個文件的文件夾後，控制臺打印inputBox.files,如下：
此時weblitRelativePath表示當前file對象的文件在文件夾中的路徑.
二、FileReader
file對象只獲取到了對文件的描述信息，但沒有獲得文件中的數據，而inputBox.value也只是保存的是文件的絕對路徑。
通過H5提供的FileReader讀取到文件中的數據,所以某些瀏覽器沒有FileReader對象，應用時需要進行驗證。
1、首先需要實例化一個FileReader對象。
var reader = new FileReader();
2、FileReader提供的方法：
①readAsArrayBuffer(file)： 按字節讀取文件內容，結果用ArrayBuffer對象表示;
②readAsBinaryString(file)： 按字節讀取文件內容，結果為文件的二進制串;
③readAsDataURL(file)： 讀取文件內容，結果用data:url的字符串形式表示;
④readAsText(file,encoding)： 按字符讀取文件內容，結果用字符串形式表示;
⑤abort()： 終止文件讀取操作.
其中readAsDataURL和readAsText較為常用，這裏只對這兩者進行說明。
3.1readAsDataURL會將文件內容進行base64編碼後輸出：
1 var inputBox = document.getElementById("inputBox"); 2 inputBox.addEventListener("change",function(){ 3 var reader = new FileReader(); 4 reader.readAsDataURL(inputBox.files[0]);//發起異步請求 5 reader.onload = function(){ 6 //讀取完成後，數據保存在對象的result屬性中 7 console.log(this.result);//base64內容顯示 8 } 9 })
3.2由於媒體文件的src屬性，可以通過采用網絡地址或base64的方式顯示，因此我們可以利用readAsDataURL實現對圖片的預覽。
1 <input type="file" id="inputBox" > 2 <img src="" id="img">
1 var inputBox = document.getElementById("inputBox"); 2 var img = document.getElementById("img"); 3 inputBox.addEventListener("change",function(){ 4 var reader = new FileReader(); 5 reader.readAsDataURL(inputBox.files[0]);//發起異步請求 6 reader.onload = function(){ 7 //讀取完成後，將結果賦值給img的src 8 img.src = this.result; 9 } 10 })
只需將讀取的結果賦給圖片的src屬性，即可預覽圖片:
4、readAsText(file,encoding)可按指定編碼方式讀取文件，但讀取文件的單位是字符，故對於文本文件，只要按規定的編碼方式讀取即可；而對於媒體文件（圖片、音頻、視頻），其內部組成並不是按字符排列，故采用readAsText讀取，會產生亂碼，因此不是最理想的讀取文件的方式。
5、FileReader提供的事件
①onabort：當讀取操作被中止時調用;
②onerror 當讀取操作發生錯誤時調用;
③onload 當讀取操作成功完成時調用;
④onloadend 當讀取操作完成時調用，無論成功或失敗;
⑤onloadstart 當讀取操作開始時調用;
⑥onprogress 在讀取數據過程中周期性調用.
1 var inputBox = document.getElementById("inputBox"); 2 var count=0; 3 inputBox.addEventListener("change",function(){ 4 var reader = new FileReader(); 5 reader.readAsText(inputBox.files[0],"utf-8");//發起異步請求 6 reader.onload = function(){ 7 console.log("加載成功") 8 } 9 reader.onloadstart = function(){ 10 console.log("開始加載") 11 } 12 reader.onloadend= function(){ 13 console.log("加載結束") 14 } 15 reader.onprogress = function(){ 16 count++; 17 console.log("加載中"+count) 18 } 19 })
控制臺結果：
每過50ms左右，就會觸發一次progress事件，對於較大的文件可以利用progress實現進度條。
onload事件在onloadend之前觸發。
由於種種原因無法讀取文件時，會觸發error事件。觸發error事件時，相關信息保存在FileReader對象的error屬性中，這個屬性將保存一個對象，此對象只有一個屬性code，即錯誤碼。1表示未找到文件,2表示安全性錯誤,3表示讀取中斷,4表示文件不可讀,5表示編碼錯誤。
如果想中斷讀取過程，可以調用abort方法，就會觸發abort事件。
無論觸發load，error，abort事件中哪一個，最終都會觸發loadend事件。
附加：window.createObjectURL/window.URL/window.webkitURL實現圖片上傳預覽
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>圖片上傳預覽</title> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script> 8 </head> 9 10 <body> 11 <form name="form0" id="form0"> 12 <input type="file" name="file0" id="file0" multiple="multiple" /> 13 <br> 14 <img src="" width="100" height="100" id="img0"> 15 </form>
16 <script> 17 $("#file0").change(function() { 18 var objUrl = getObjectURL(this.files[0]); 19 console.log("objUrl = " + objUrl); 20 if (objUrl) { 21 $("#img0").attr("src", objUrl); 22 } 23 }); 24 25 //取得該文件的url 26 function getObjectURL(file) { 27 var url = null; 28 if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) { 29 url = window.URL.createObjectURL(file); 30 } else if (window.webkitURL != undefined) { 31 url = window.webkitURL.createObjectURL(file); 32 } 33 return url; 34 } 35 </script> 36 </body> 37 38 </html>
FileReader讀取本地文件