HTML5 文件域+FileReader 分段读取文件

Posted 2020-08-06 天马3798

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