FileReader方法：
- readerText():讀取文本文件，可以使用TXT打開的文本文件，返回的是字符串形式，默認的編碼格式是utf-8.
- readAsBinaryString()：讀取任意類型的文件，返回的是二進制數據，后台接受后可以存儲到數據庫
- readAsDataURL():讀取文件獲取一段以data開頭的字符串。DataURL是將資源轉換為base64編碼的字符串，文本一般是圖像文本。
- abort()：中端讀取。
FileReader提供的一些完整的事件：
- onbort:讀取文件中斷片時觸發。
- onerror:讀取文件錯誤時候時觸發。
- onload:文件讀取成功后觸發的事件。
- onloadend:讀取完成時觸發，無論成功還是失敗。
- onloadstart:開始讀取時候觸發。
- onprogress:讀取文件過程中觸發事件。
實例代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--實現圖片的實時預覽 onchange改變元素后觸發方法--> <from> 文件: <input type="file" name="myFile" id="myFile" multiple onchange="getFileContext()"><br> <img id="img"><br> <input type="submit"> </from> <script> function getFileContext() { var reader=new FileReader(); //需要的參數是圖片 var file=document.querySelector("#myFile").files; // 沒有返回值，將其結果儲存在result中，無法判斷文件是否讀完 reader.readAsDataURL(file[0]); reader.onload=function () { // 展示出來：得到的reader.result為二進制文件base64 data:image/jpeg;base64... console.log(reader.result); document.querySelector("#img").src=reader.result; } } </script> </body> </html>
這里是巧妙利用onchange觸發改變事件，當前元素有改變時候觸發。
reader.readAsDataURL(file[0]);是將得到的值轉為dom操作對象。