FileReader物件
了解什麼是FileReader物件以及如何使用它 FileReader物件以非同步方式讀取檔案的內容。 它提供了四個讀取方法，可以用來開始讀取過程： readAsText()：以文字字串形式讀取內容 readAsDataURL()：將內容以數據URL形式讀取 readAsArrayBuffer()：將內容讀取為ArrayBuffer readAsBinaryString()：以二進制字串形式讀取內容 另外還有一個abort()方法，用來停止任何的讀取操作。 讀取檔案是非同步的，該物件還提供了一些事件，我們可以利用這些事件來追蹤操作的進度： onload：當讀取成功結束時觸發 onloadstart：當讀取開始時觸發 onprogress：當讀取進行中時觸發 onloadend：無論讀取是否成功結束都會觸發 onerror：當發生錯誤時觸發 onabort：當讀取被中止時觸發 一旦讀取操作完成，FileReader物件的result屬性將包含檔案的內容。 error屬性包含錯誤訊息（如果有錯誤發生），而readyState則包含操作的狀態編號。狀態編號為: 0：未載入任何資料 1：資料載入中 2：載入完成 readAsText() 以文字字串形式載入blob的內容。 以下是一個範例，將文字放入#content元素的內部HTML： //..file is available as a blob const reader = new FileReader() reader.onload = event => { const text = reader.result document.getElementById('content').innerHTML = text } reader.onerror = (e) => { console.error(e) } reader.readAsText(file) 以下是一個範例，當使用input元素上傳文本檔時，讀取檔案內容並將內容打印到控制台： <input type="file" allow="text/*" /> const input = document.querySelector('input') input.addEventListener('change', e => { const reader = new FileReader() reader....