FileReader abort 事件

admin發表於2020-04-10
事件

abort 事件會在 FileReader 讀取資料中斷時觸發，比如呼叫abort() 方法。

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

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

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
var h = {
  init: function () {
    var _this = this;
  
    document.getElementById("File").onchange = _this.fileHandler;
    document.getElementById("Abort").onclick = _this.abortHandler;
  
    _this.status = document.getElementById("Status");
    _this.progress = document.getElementById("Progress");
    _this.percent = document.getElementById("Percent");
  
    _this.loaded = 0;
    //每次讀取1M  
    _this.step = 1024 * 1024;
    _this.times = 0;
  },
  fileHandler: function (e) {
    var _this = h;
    _this.file = this.files[0];
    _this.reader = new FileReader();
  
    _this.total = _this.file.size;
  
    _this.reader.onloadstart = _this.onLoadStart;
    _this.reader.onprogress = _this.onProgress;
    _this.reader.onabort = _this.onAbort;
    _this.reader.onerror = _this.onerror;
    _this.reader.onload = _this.onLoad;
    _this.reader.onloadend = _this.onLoadEnd;
    //讀取第一塊  
    _this.readBlob(0);
  },
    
  readBlob: function (start) {
    var _this = h;
  
    var blob,
        file = _this.file;
  
    _this.times += 1;
  
    blob = file.slice(start, start + _this.step + 1);
    _this.reader.readAsText(blob);
  },
  
  onLoadStart: function () {
    var _this = h;
  },
  
  onProgress: function (e) {
    var _this = h;
    _this.loaded += e.loaded;
    //更新進度條  
    _this.progress.value = (_this.loaded / _this.total) * 100;
  },
  
  onAbort: function () {
    var _this = h;
    console.log("讀取中斷");
  },
  onError: function () {
    var _this = h;
  },
  
  onLoad: function () {
    var _this = h;
  
    if (_this.loaded < _this.total) {
      _this.readBlob(_this.loaded);
    } else {
      _this.loaded = _this.total;
    }
  },
  
  onLoadEnd: function () {
    var _this = h;
  },
    
  abortHandler: function () {
    var _this = h;
  
    if (_this.reader) {
      _this.reader.abort();
    }
  }
};
  
window.onload = function () {
  h.init();
}
</script>
</head>
<body>
<form>
  <fieldset>
    <legend>分度讀取檔案：</legend>
    <input type="file" id="File" />
    <input type="button" value="中斷" id="Abort" />
    <p>
      <label>讀取進度：</label>
      <progress id="Progress" value="0" max="100"></progress>
    </p>
    <p id="Status"></p>
  </fieldset>
</form>  
</body>
</html>

為了測試方便，找一個大一點的檔案上傳，然後點選中斷按鈕。

於是 bort 事件觸發，進而列印出對應字串，程式碼執行效果截圖：

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

點選中斷按鈕之後觸發 click 事件，進而執行事件處理函式中的 abort()方法，中斷讀取。

於是觸發 abort 事件，進而執行對應事件處理函式，列印出上述內容。

相關文章