FileReader 事件用法

admin發表於2018-08-17
事件

FileReader物件採用非同步方式讀取檔案，在不同的讀取階段會觸發不同的事件。

事件列表:

（1）.abort事件：讀取中斷或呼叫reader.abort()方法時觸發。

（2）.error事件：讀取出錯時觸發。

（3）.load事件：讀取成功後觸發。

（4）.loadend事件：讀取完成後觸發，不管是否成功。觸發順序排在 onload 或 onerror 後面。

（5）.loadstart事件：讀取將要開始時觸發。

（6）.progress事件：讀取過程中週期性觸發。

程式碼例項:

[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 () {
    console.log("讀取將要開始");
    var _this = h;
  },

  onProgress: function (e) {
    console.log("正在進行讀取");
    var _this = h;
    _this.loaded += e.loaded;
    //更新進度條  
    _this.progress.value = (_this.loaded / _this.total) * 100;
  },

  onAbort: function () {
    console.log("讀取中斷");
    var _this = h;
  },
  onError: function () {
    console.log("讀取中斷");
    var _this = h;
  },

  onLoad: function () {
    console.log("讀取完成");
    var _this = h;

    if (_this.loaded < _this.total) {
      _this.readBlob(_this.loaded);
    } else {
      _this.loaded = _this.total;
    }
  },

  onLoadEnd: function () {
    console.log("讀取結束");
    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>

上面是一個完整的演示程式碼，讀取較大的檔案演示效果更佳明顯，檔案是分段上傳的。

控制檯截圖如下:

事件演示截圖

相關文章