獲取原生files對象
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 等格式的文件。（其中base64的方式就是由此來獲得的。。）
FileReader 包含了一套完整的事件模型，用於捕獲讀取文件時的狀態，下面這個表格歸納了這些事件。
| 事件 |
描述 |
| onabort |
中斷時觸發 |
| onerror |
出錯時觸發 |
| onload |
文件讀取成功完成時觸發 |
| onloadend |
讀取完成觸發，無論成功或失敗 |
| onloadstart |
讀取開始時觸發 |
| onprogress |
讀取中 |
文件一旦開始讀取，無論成功或失敗，實例的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果，絕大多數的程序都會在成功讀取文件的時候，抓取這個值。
案例
實現圖片實時更新
$('#myfile').change(function () { let file_obj = this.files[0]; let fileReader = new FileReader(); console.log(fileReader); fileReader.readAsDataURL(file_obj); fileReader.onload = function () { $('#id_img').attr('src', fileReader.result); } });