loadend 與 load 事件區別

admin發表於2020-04-10
事件

關於兩個事件的基礎知識可以參閱如下兩篇文章：

（1）.loadend 事件參閱 FileReader loadend 事件一章節。

（2）.load 事件參閱 FileReader load 事件一章節。

loadend 事件與 load 事件比較類似，都是 FileReader 讀取資料完畢後觸發。

但是兩者的區別也是比較明顯的，下面進行一下簡略的介紹：

（1）.兩個事件都是在 FileReader 讀取資料完畢後觸發。

（2）.loadend 事件無論讀取成功與否都會觸發，load 事件只能讀取成功才會觸發。

（3）.loadend 事件在 load 事件之後觸發。

程式碼例項如下：

[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>

上傳一個具有 "螞蟻部落www.softwhy.com" 內容的文字檔案。

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

a:3:{s:3:\"pic\";s:43:\"portal/202004/10/154551ktkrt3n3zmxi33i2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由在 div 中顯示的內容可以看到三個事件觸發的順序是 loadstart 、load 和 loadend。

相關文章