FileReader 事件
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>
上面是一個完整的演示程式碼,讀取較大的檔案演示效果更佳明顯,檔案是分段上傳的。
控制檯截圖如下:
相關文章
- FileReader error 事件Error事件
- FileReader abort 事件事件
- FileReader 事件用法事件
- FileReader loadstart 事件事件
- JavaScript FileReaderJavaScript
- FileReader 解析
- FileReader readAsText()AST
- FileReader result 屬性
- FileReader error 屬性Error
- FileReader readyState 屬性
- FileReader.readyState 屬性
- HTML5之FileReader的使用HTML
- BufferedReader、FileReader、FileInputStream的區別
- HTML5進階FileReader的使用HTML
- web前端圖片上傳(3)–filereaderWeb前端
- IO流 檔案字元流FileReader、FlieWriter字元
- Java I/O 教程(九) FileWriter和FileReaderJava
- java中FileInputStream,FileReader等的區別Java
- FileReader()讀取檔案、圖片上傳預覽
- FileReader初步使用實現上傳圖片預覽效果
- Java 用FileReader 和 FileWriter 進行檔案讀寫(txt) (Java
- input file利用FileReader實現圖片上傳程式碼例項
- ajax利用FormData、FileReader實現多檔案上傳php獲取ORMPHP
- FileReader與URL.createObjectURL實現圖片、視訊上傳預覽Object
- H5 FileReader+drag+ajax2.0+Formdata實現圖片拖拽上傳H5ORM
- 前端開發入門到實戰:HTML5進階FileReader的使用前端HTML
- JS事件(事件冒泡和事件捕獲)JS事件
- 事件 滑鼠事件 表單事件 from表單事件
- javaScript事件(五)事件型別之滑鼠事件JavaScript事件型別
- React 事件和 Dom 事件React事件
- onscroll 事件和onScrollCapture事件事件APT
- 事件協作和事件溯源事件
- 事件流與事件溯源事件
- javaScript事件(一)事件流JavaScript事件
- javaScript事件(三)事件物件JavaScript事件物件
- Solidity事件,等待事件Solid事件
- js--事件流、事件委託、事件階段JS事件
- js 事件冒泡 事件代理 事件捕捉 this指標 bind thisJS事件指標