一、分段读取txt文本

HTML:

<div class="container">
<div class="panel panel-default">
<div class="panel-heading">分段读取文件:</div>
<div class="panel-body">
<input type="file" id="file" />
<blockquote style="word-break:break-all;"></blockquote>
</div>
</div>
</div>

JS:

    var fileBox = document.getElementById('file');
file.onchange = function () {
//获取文件对象
var file = this.files[0];
var reader = new FileReader();
//var step = 10 * 3 * 8; //固定长度截取 文件内容时注意,在切分点会有乱码出现的可能
var step = 1024 * 512; //如果文件太大,截取内容小会出现假死现象,因为js执行是同步的
var total = file.size;
var cuLoaded = 0;
console.info("文件大小:" + file.size);
//读取一段成功
reader.onload = function (e) {
//处理读取的结果
showResult(reader.result);
cuLoaded += e.loaded;
//如果没有读完,继续
if (cuLoaded < total) {
readBlob(cuLoaded);
} else {
cuLoaded = total;
}
}
//处理显示读取结果
$('blockquote').empty();
function showResult(result) {
//在读取结果处理中,如果没有Dom显示操作,速度还是非常快的
//如果有Dom显示操作在IE下,很容易使浏览器崩溃
//$('blockquote').append('<br />');
//$('blockquote').append(result);
console.info(result);
}
//开始读取
readBlob(0);
//指定开始位置,分块读取文件
function readBlob(start) {
//指定开始位置和结束位置读取文件
var blob = file.slice(start, start + step);
reader.readAsText(blob, 'gbk');
}
}

二.分段读取文件为二进制数组ArrayBuffer

HTML:

<div class="container">
<div class="panel panel-default">
<div class="panel-heading">分段读取文件:</div>
<div class="panel-body">
<input type="file" id="file" />
<blockquote style="word-break:break-all;"></blockquote>
</div>
</div>
</div>

JS:

var reader2 = new FileReader();
var fileBox = document.getElementById('file');
file.onchange = function () {
//获取文件对象
var file = this.files[0];
var reader = new FileReader();
var step = 1024* 1024;
var total = file.size;
var cuLoaded = 0;
console.info("文件大小:" + file.size);
//读取一段成功
reader.onload = function (e) {
//处理读取的结果
showResult(reader.result);
cuLoaded += e.loaded;
//如果没有读完,继续
if (cuLoaded < total) {
readBlob(cuLoaded);
} else {
cuLoaded = total;
}
}
//处理显示读取结果
$('blockquote').empty();
function showResult(result) {
console.info(result);
var buf = new Uint8Array(result);
$('blockquote').append('<br/>');
$('blockquote').append(buf.toString());
}
//开始读取
readBlob(0);
//指定开始位置,分块读取文件
function readBlob(start) {
//指定开始位置和结束位置读取文件
var blob = file.slice(start, start + step);
reader.readAsArrayBuffer(blob);
}
}

三、读取分段结果的二次处理

var reader2 = new FileReader();
var fileBox = document.getElementById('file');
file.onchange = function () {
//获取文件对象
var file = this.files[0];
var reader = new FileReader();
var step = 10*2*8;
var total = file.size;
var cuLoaded = 0;
//读取一段成功
reader.onload = function (e) {
//处理读取的结果
showResult(reader.result);
cuLoaded += e.loaded;
//如果没有读完,继续
if (cuLoaded < total) {
console.info('cuLoaded:' + cuLoaded);
readBlob(cuLoaded);
} else {
cuLoaded = total;
}
}
//处理显示读取结果
$('blockquote').empty();
function showResult(result) {
//解决方案 先读取 blob 然后在转换成 字符串
//特别说明,如果使用Uint8Array 则每次读取数量应该是 8的倍数
var buf = new Uint8Array(result);
var blob = new Blob([buf]);
reader2.readAsText(blob, 'gbk');
reader2.onload = function (e) {
$('blockquote').append('<br/>');
$('blockquote').append(reader2.result);
}
}
//开始读取
readBlob(0);
//指定开始位置,分块读取文件
function readBlob(start) {
//指定开始位置和结束位置读取文件
var blob = file.slice(start, start+step);
reader.readAsArrayBuffer(blob);
}
}

读取文件三:http://www.cnblogs.com/tianma3798/p/5839810.html

读取文件二:http://www.cnblogs.com/tianma3798/p/5839791.html

读取文件一:http://www.cnblogs.com/tianma3798/p/4355949.html