HTML5 文件域+FileReader 分段读取文件(五)

<div class="container">
<!--文本文件验证-->
<input type="file" id="file" />
<h4>选择文件如下:</h4>
<blockquote></blockquote>
</div>

//读取文本文件实例
var fileBox = document.getElementById('file');
fileBox.onchange = function () {
showFiles();
}
function showFiles() {
//获取选择文件的数组
var fileList = fileBox.files;
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
readFile(file);
}
}
//读取文件内容
function readFile(file) {
var reader = new FileReader();
//中文windows系统 txt 文本多数默认编码 gbk
reader.readAsText(file, 'gbk');
reader.onprogress = function (e) {
//默认情况下也是分段读取，
//默认情况下，每次分段大小不确定，不同浏览器也不相同
//第一次读取比较小 Google每段：8028160(7.65625mb)   FF每段：786432(768mb)   IE下：4096（4k）
console.info(e);
}
reader.onload = function (e) {
var result = reader.result;
console.info(e.loaded);
}
}

<div class="container">
<div class="panel panel-default">
<div class="panel-heading">分段读取文件：</div>
<div class="panel-body">
<input  type="file" id="file" />
<input type="button" id="abort" value="中断" />
<input type="button" id="containue" value="继续读取文件" />
<p>
<label>读取进度：</label><progress id="Progress"  style="width:300px;" value="0" max="100"></progress>
</p>
<p id="Percent"></p>
<p id="Status"></p><hr />
<blockquote style="word-break:break-all;"></blockquote>
</div>
</div>
</div>

var read = {
//初始化绑定
init: function () {
var _this = this;
_this.status = document.getElementById('Status');
_this.progress = document.getElementById('Progress');
_this.percent = document.getElementById('Percent');

document.getElementById('file').onchange = _this.fileHandler;
document.getElementById('abort').onclick = _this.abortHandler;
document.getElementById('containue').onclick = _this.containueHandler;

_this.loaded = 0;
//每次读取1M
_this.step = 3 * 2;
},
//当有选中文件时,事件处理
fileHandler: function (e) {
//读取文件
var _this = read;
//获取上传文件
var file = _this.file = this.files[0];
var reader = _this.reader = new FileReader();
//绑定信息和事件
_this.total = file.size;
 _this.isabort = false;//标记正在读取还是以已经中止
reader.onprogress = _this.onProgress;
reader.onabort = _this.onAbort;
reader.onerror = _this.onError;
reader.onload = _this.onLoad;
//从头读取一块
_this.readBlob(0);
$('blockquote').empty();
},
//中断 操作
abortHandler: function (e) {
var _this = read;
if (_this.reader) {
console.log('读取操作操作中止,' + _this.loaded);
_this.isabort = true;
_this.reader.abort();
}
},
//继续操作
containueHandler: function (e) {
var _this = read;
_this.isabort = false;
console.info('继续：' + _this.loaded);
//继续读取
_this.readBlob(_this.loaded);
},
//读取过程
onProgress: function (e) {
var _this = read;
if (e.lengthComputable == false)
return;
_this.loaded += e.loaded;
//更新进度条
var value = (_this.loaded / _this.total) * 100;
_this.percent.innerText = value;
_this.progress.value = value;
},
//中止上传事件
onAbort: function () {
var _this = read;
//console.log('读取操作操作中止,'+_this.loaded);
},
//当出现异常时
onError: function () { },
//读取成功  结束
onLoad: function (e) {
var _this = read;
var result = _this.reader.result;
$('blockquote').append(result);
//判断是否已经读到最后，如果没有继续读取
if (_this.loaded < _this.total) {
//IE 浏览器下，事件触发速度太快，页面容易出现假死现象，解决方案延缓事件触发
setTimeout(function () {
_this.readBlob(_this.loaded);
}, 10);
//直接使用在Google，FF没问题
// _this.readBlob(_this.loaded);
} else {
_this.loaded = _this.total;
}
},
readBlob: function (start) {
var _this = read;
if (_this.isabort)
return;
var file = _this.file;
var blob = file.slice(start, start + _this.step);
 _this.reader.readAsText(blob, 'gbk');
}
};
read.init();

var read = {
//初始化绑定
init: function () {
var _this = this;
_this.status = document.getElementById('Status');
_this.progress = document.getElementById('Progress');
_this.percent = document.getElementById('Percent');

document.getElementById('file').onchange = _this.fileHandler;
document.getElementById('abort').onclick = _this.abortHandler;

_this.loaded = 0;
//每次读取1M
//_this.step = 1024 * 1024;
//_this.step = 1024;
_this.step = 1024;
_this.times = 0;
},
//当有选中文件时,事件处理
fileHandler: function (e) {
//读取文件
var _this = read;
//获取上传文件
var file = _this.file = this.files[0];
var reader = _this.reader = new FileReader();
//绑定信息和事件
_this.total = file.size;
reader.onloadstart = _this.onLoadStrart;
reader.onprogress = _this.onProgress;
reader.onabort = _this.onAbort;
reader.onerror = _this.onError;
reader.onload = _this.onLoad;
//reader.onloadend = _this.onLoadEnd;
//从头读取一块
_this.readBlob(0);
$('blockquote').empty();
},
//中断
abortHandler: function (e) {
var _this = read;
if (_this.reader) {
_this.reader.abort();
}
},
//开始读取文件
onLoadStrart: function () { },
//读取过程
onProgress: function (e) {
var _this = read;
//e.loaded 当前读取的数量
//e.total 读取总量
_this.loaded += e.loaded;
//更新进度条
_this.progress.value = (_this.loaded / _this.total) * 100;
},
//中止上传事件
onAbort: function () { },
//当出现异常时
onError: function () { console.log('读取出错'); },
//读取成功  结束
onLoad: function (e) {
var _this = read;
var reader = _this.reader;
// console.info(_this.loaded + '---' + _this.total);
//console.info(reader.result); //ArrayBuffer 数组
//console.info(reader.result.byteLength); //ArrayBuffer 数组 的长度

//转换成  Int8Array 类型
//var b = new Int8Array(reader.result);
//转换成 Int32Arrary 类型
var b = new Int32Array(reader.result);
console.info(b); //ArrayBuffer 数组 的长度
$('blockquote').append(b.toString());
//判断是否已经读到最后，如果没有继续读取
if (_this.loaded < _this.total) {
_this.readBlob(_this.loaded);
} else {
_this.loaded = _this.total;
}
},
//读取结束时 ,每次读取成功结束或调用abord
onLoadEnd: function (e) {
//console.log('读取结束');
},
readBlob: function (start) {
var _this = read;
var blob,
file = _this.file;
_this.times += 1;
console.info('start:' + start);
 blob = file.slice(start, start + _this.step);
 _this.reader.readAsArrayBuffer(blob);
}
};
read.init();