FileReader objects asynchronously read a file, it will trigger different events at different stages of reading.
Event list:
(1) .abort events: read interrupt or call reader.abort () method is triggered.
(2) .error event: Triggered when reading error.
(3) .load event: After reading success triggered.
(4) .loadend events: after reading the complete trigger, regardless of whether success. Trigger in order to the onload or behind onerror.
(5) .loadstart event: reading will begin triggered.
(6) .progress events: periodically triggering the reading process.
Code examples:
[HTML]
plain text view
Copy the code
to run code
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<!DOCTYPE html>
<
html
lang
=
"zh-cn"
>
<
head
>
<
meta
charset
=
" utf-8"
>
<
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
>
|
The above is a complete demo code, read large files presentations more effective obviously, segmented file is uploaded.
Screenshot console as follows:
