首页 > 代码库 > HTML5 文件域+FileReader 分段读取文件(四)

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

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

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

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