HTML5-FileReader

1.基本說明

(1)FileReader可以主要用於將文件內容讀入內存，通過一系列異步接口，可以在主線程中訪問本地文件。

(2)用途：在input:file文件域中，對於選中的文件，一般只能獲取文件名，無法得知具體的路徑，因此無法訪問被選中的文件，傳送門：https://www.cnblogs.com/OrochiZ-/p/11565264.html
而FileReader可以將選中的文件內容讀入內存，通過一系列異步接口，從而達到訪問本地文件的目的。

2.創建文件讀取對象

var reader = new FileReader();

3.讀取文件的方法

readAsText():讀取文本文件（css,txt,html）,返回文本字符串
readAsBinaryString():讀取任意類型文件，返回二進制字符串
redaAsDataURL():異步讀取文件內容，結果用data:url的字符串形式表示
readAsArrayBuffer(file)：將文件讀取為arraybuffer

注意：該函數沒有返回值,讀取結果存放於result屬性中，且文件讀取是異步操作，想要獲得讀取結果要使用事件監聽

4.事件監聽

onabort 該事件在讀取操作被中斷時觸發。
onerror 該事件在讀取操作發生錯誤時觸發
onload 當讀取操作成功完成時調用
onloadend 該事件在讀取操作結束時（要么成功，要么失敗）觸發。
onloadstart 該事件在讀取操作開始時觸發
onprogress 在讀取數據過程中持續觸發

reader.onloadstart = function() {
    console.log('文件開始讀取');
}
reader.onprogress = function() {
    console.log('文件讀取中');
}
reader.onload = function() {
    console.log('文件讀取成功');
}

5.實例

<form action="">
    <!-- 可添加accept屬性設置文件類型 -->
    <input type="file" name="file" id="file">
</form>
<div id="showBox">
    <p></p>
    <img src="" alt="" width="400px">
</div>

(1)讀取文件域選中的文本文件並顯示在頁面上

window.onload = function() {
    var myFile = document.getElementById('file');
    var showBox = document.getElementById('showBox');
    myFile.onchange = function() {
        var reader = new FileReader();
        //讀取txt文件
        //myFile.files[0]為選中的文件
        reader.readAsText(myFile.files[0], 'utf-8');
        //該函數沒有返回值，讀取結果存放於reader.result
        //讀取文件是異步操作，需要調用其他方法才能正常查看
        reader.onload = function() {
            //將讀取的結果存展示在頁面中
            showBox.querySelector('p').innerHTML = reader.result;
        }
    }
}

(2)讀取圖片並顯示在頁面上

window.onload = function() {
    var myFile = document.getElementById('file');
    var showBox = document.getElementById('showBox');
    myFile.onchange = function() {
        var reader = new FileReader();
        //該函數沒有返回值，讀取結果存放於reader.result
        reader.readAsDataURL(myFile.files[0]);
        //讀取文件是異步操作，需要事件監聽才能查看
        reader.onload = function() {
            //文件已讀取完畢 將結果賦值給src元素
            showBox.querySelector('img').src = reader.result;
        }
    }
}