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

一、分段读取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);}
}