FileReader loadstart 事件

admin發表於2020-04-21
事件

loadstart 事件當 FileReader 讀取資料開始時觸發。

關於事件處理函式註冊，可以參閱 如何註冊事件處理函式 一章節。

FileReader 更多內容參閱 JavaScript FileReader 一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#txt {
  width: 180px;
  height: 50px;
  border: 2px dotted green;
  font-size: 12px;
  text-align: center;
}
</style>
<script>
window.onload = ()=> {
  let reader;
  if (FileReader) {
    reader = new FileReader();
  } else {
    alert('當前瀏覽器不支援');
    return;
  }

  let inputFile = document.getElementById('file');
  let txt = document.getElementById("txt");
  let str = "";

  inputFile.onchange = ()=> {
    let file = inputFile.files[0];
    if (/text\/\w+/.test(file.type)) {
      reader.readAsText(file);

      reader.onloadstart = function () {
        str=str+"---開始---<br>";
      }
      reader.onload = function () {
        str = str + reader.result+"<br>";
      }
      reader.onloadend = function () {
        str = str+"---結束---";
        txt.innerHTML = str;
      }
    } else {
      alert('必須是文字檔案');
    }
  }
}
</script>
</head>
<body>
  <div><input type="file" id="file" /></div>
  <div id="txt"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202004/21/171343kfw33byp8n2xl8xx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.當開始讀取資料時，loadstart 事件觸發。

（2）.事件觸發的順序是 loadstart 、load 和 loadend。

相關文章