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); } }
读取文件三:http://www.cnblogs.com/tianma3798/p/5839810.html