FileReader 上傳並讀取文件，實現前端選擇文件後讀取文件內容

HTML5 的 FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

FileReader 事件

• FileReader.onabort
  處理abort事件。該事件在讀取操作被中斷時觸發。

• FileReader.onerror
  處理error事件。該事件在讀取操作發生錯誤時觸發。

• FileReader.onload
  處理load事件。該事件在讀取操作完成時觸發。

• FileReader.onloadstart
  處理loadstart事件。該事件在讀取操作開始時觸發。

• FileReader.onloadend
  處理loadend事件。該事件在讀取操作結束時（要麼成功，要麼失敗）觸發。

• FileReader.onprogress
  處理progress事件。該事件在讀取Blob時觸發。

<div style="border: 1px solid red;">
    <input type="file" id="file"  onchange="uploadfile();" />
    <div id="result"> </div>
</div>

    // 上傳文件
    function uploadfile() {
        let reads = new FileReader();
        file = document.getElementById('file').files[0];
        reads.readAsText(file, 'utf-8');
        console.log(reads);
        reads.onload = function (e) {
            console.log(e.target.result)
        };
        reads.onloadstart = function(e) {
            console.log('onloadstart ---> ', e)
        }
        reads.onloadend = function(e) {
            console.log('onloadend ---> ', e)
        }
        reads.onprogress = function(e) {
            console.log('onprogress ---> ', e)
        }
    }