一、默认FileReader会分段读取File对象,这是分段大小不一定,并且一般会很大

HTML:

<div class="container">
    <!--文本文件验证-->
    <input type="file" id="file" />
    <h4>选择文件如下:</h4>
    <blockquote></blockquote>
</div>

JS:

//读取文本文件实例
var fileBox = document.getElementById('file');
fileBox.onchange = function () {
    showFiles();
}
function showFiles() {
    //获取选择文件的数组
    var fileList = fileBox.files;
    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        readFile(file);
    }
}
//读取文件内容
function readFile(file) {
    var reader = new FileReader();
    //中文windows系统 txt 文本多数默认编码 gbk
    reader.readAsText(file, 'gbk');
    reader.onprogress = function (e) {
        //默认情况下也是分段读取,
        //默认情况下,每次分段大小不确定,不同浏览器也不相同
        //第一次读取比较小 Google每段:8028160(7.65625mb)   FF每段:786432(768mb)   IE下:4096(4k)
        console.info(e);
    }
    reader.onload = function (e) {
        var result = reader.result;
        console.info(e.loaded);
    }
}

二、分段读取文本文件+进度条实例,并解决IE浏览器崩溃问题

HTML:

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">分段读取文件:</div>
        <div class="panel-body">
            <input  type="file" id="file" />
            <input type="button" id="abort" value="中断" />
            <input type="button" id="containue" value="继续读取文件" />
            <p>
                <label>读取进度:</label><progress id="Progress"  style="width:300px;" value="0" max="100"></progress>
            </p>
            <p id="Percent"></p>
            <p id="Status"></p><hr />
            <blockquote style="word-break:break-all;"></blockquote>
        </div>
    </div>
</div>

JS:

var read = {
    //初始化绑定
    init: function () {
        var _this = this;
        _this.status = document.getElementById('Status');
        _this.progress = document.getElementById('Progress');
        _this.percent = document.getElementById('Percent');

        document.getElementById('file').onchange = _this.fileHandler;
        document.getElementById('abort').onclick = _this.abortHandler;
        document.getElementById('containue').onclick = _this.containueHandler;

        _this.loaded = 0;
        //每次读取1M
        _this.step = 3 * 2;
    },
    //当有选中文件时,事件处理
    fileHandler: function (e) {
        //读取文件
        var _this = read;
        //获取上传文件
        var file = _this.file = this.files[0];
        var reader = _this.reader = new FileReader();
        //绑定信息和事件
        _this.total = file.size;
        _this.isabort = false;//标记正在读取还是以已经中止
        reader.onprogress = _this.onProgress;
        reader.onabort = _this.onAbort;
        reader.onerror = _this.onError;
        reader.onload = _this.onLoad;
        //从头读取一块
        _this.readBlob(0);
        $('blockquote').empty();
    },
    //中断 操作
    abortHandler: function (e) {
        var _this = read;
        if (_this.reader) {
            console.log('读取操作操作中止,' + _this.loaded);
            _this.isabort = true;
            _this.reader.abort();
        }
    },
    //继续操作
    containueHandler: function (e) {
        var _this = read;
        _this.isabort = false;
        console.info('继续:' + _this.loaded);
        //继续读取
        _this.readBlob(_this.loaded);
    },
    //读取过程
    onProgress: function (e) {
        var _this = read;
        if (e.lengthComputable == false)
            return;
        _this.loaded += e.loaded;
        //更新进度条
        var value = (_this.loaded / _this.total) * 100;
        _this.percent.innerText = value;
        _this.progress.value = value;
    },
    //中止上传事件
    onAbort: function () {
        var _this = read;
        //console.log('读取操作操作中止,'+_this.loaded);
    },
    //当出现异常时
    onError: function () { },
    //读取成功  结束
    onLoad: function (e) {
        var _this = read;
        var result = _this.reader.result;
        $('blockquote').append(result);
        //判断是否已经读到最后,如果没有继续读取
        if (_this.loaded < _this.total) {
            //IE 浏览器下,事件触发速度太快,页面容易出现假死现象,解决方案延缓事件触发
            setTimeout(function () {
                _this.readBlob(_this.loaded);
            }, 10);
            //直接使用在Google,FF没问题
            // _this.readBlob(_this.loaded);
        } else {
            _this.loaded = _this.total;
        }
    },
    readBlob: function (start) {
        var _this = read;
        if (_this.isabort)
            return;
        var file = _this.file;
        var blob = file.slice(start, start + _this.step);
        _this.reader.readAsText(blob, 'gbk');
    }
};
read.init();

三、分段读取文件为ArrayBuffer+进度条显示

HTML,同上

JS:

var read = {
    //初始化绑定
    init: function () {
        var _this = this;
        _this.status = document.getElementById('Status');
        _this.progress = document.getElementById('Progress');
        _this.percent = document.getElementById('Percent');

        document.getElementById('file').onchange = _this.fileHandler;
        document.getElementById('abort').onclick = _this.abortHandler;

        _this.loaded = 0;
        //每次读取1M
        //_this.step = 1024 * 1024;
        //_this.step = 1024;
        _this.step = 1024;
        _this.times = 0;
    },
    //当有选中文件时,事件处理
    fileHandler: function (e) {
        //读取文件
        var _this = read;
        //获取上传文件
        var file = _this.file = this.files[0];
        var reader = _this.reader = new FileReader();
        //绑定信息和事件
        _this.total = file.size;
        reader.onloadstart = _this.onLoadStrart;
        reader.onprogress = _this.onProgress;
        reader.onabort = _this.onAbort;
        reader.onerror = _this.onError;
        reader.onload = _this.onLoad;
        //reader.onloadend = _this.onLoadEnd;
        //从头读取一块
        _this.readBlob(0);
        $('blockquote').empty();
    },
    //中断
    abortHandler: function (e) {
        var _this = read;
        if (_this.reader) {
            _this.reader.abort();
        }
    },
    //开始读取文件
    onLoadStrart: function () { },
    //读取过程
    onProgress: function (e) {
        var _this = read;
        //e.loaded 当前读取的数量
        //e.total 读取总量
        _this.loaded += e.loaded;
        //更新进度条
        _this.progress.value = (_this.loaded / _this.total) * 100;
    },
    //中止上传事件
    onAbort: function () { },
    //当出现异常时
    onError: function () { console.log('读取出错'); },
    //读取成功  结束
    onLoad: function (e) {
        var _this = read;
        var reader = _this.reader;
        // console.info(_this.loaded + '---' + _this.total);
        //console.info(reader.result); //ArrayBuffer 数组
        //console.info(reader.result.byteLength); //ArrayBuffer 数组 的长度

        //转换成  Int8Array 类型
        //var b = new Int8Array(reader.result);
        //转换成 Int32Arrary 类型
        var b = new Int32Array(reader.result);
        console.info(b); //ArrayBuffer 数组 的长度
        $('blockquote').append(b.toString());
        //判断是否已经读到最后,如果没有继续读取
        if (_this.loaded < _this.total) {
            _this.readBlob(_this.loaded);
        } else {
            _this.loaded = _this.total;
        }
    },
    //读取结束时 ,每次读取成功结束或调用abord
    onLoadEnd: function (e) {
        //console.log('读取结束');
    },
    readBlob: function (start) {
        var _this = read;
        var blob,
            file = _this.file;
        _this.times += 1;
        console.info('start:' + start);
        blob = file.slice(start, start + _this.step);
        _this.reader.readAsArrayBuffer(blob);
    }
};
read.init();

分段读取文件(四):http://www.cnblogs.com/tianma3798/p/5839869.html

读取文件三: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 分段读取文件(五)的更多相关文章

  1. HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket

    一.同时上传多个文件处理 HTML: <div class="container"> <div class="panel panel-default&q ...

  2. HTML5 文件域+FileReader 分段读取文件并上传(七)-WebSocket

    一.单文件上传实例 HTML: <div class="container"> <div class="panel panel-default" ...

  3. HTML5 文件域+FileReader 分段读取文件并上传到服务器(六)

    说明:使用Ajax方式上传,文件不能过大,最好小于三四百兆,因为过多的连续Ajax请求会使后台崩溃,获取InputStream中数据会为空,尤其在Google浏览器测试过程中. 1.简单分段读取文件为 ...

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

    一.分段读取txt文本 HTML: <div class="container"> <div class="panel panel-default&qu ...

  5. HTML5 文件域+FileReader 读取文件(一)

    在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.File ...

  6. Java利用内存映射文件实现按行读取文件

    我们知道内存映射文件读取是各种读取方式中速度最快的,但是内存映射文件读取的API里没有提供按行读取的方法,需要自己实现.下面就是我利用内存映射文件实现按行读取文件的方法,如有错误之处请指出,或者有更好 ...

  7. .net上传文件,利用npoi读取文件信息到datatable里

    整理代码,.net上传文件,利用npoi读取文件到datatable里,使用了FileUpload控件,代码如下: protected void Button1_Click(object sender ...

  8. php高效遍历文件夹、高效读取文件

    /** * PHP高效遍历文件夹(大量文件不会卡死) * @param string $path 目录路径 * @param integer $level 目录深度 */ function fn_sc ...

  9. HTML5 文件域+FileReader 读取文件并上传到服务器(三)

    一.读取文件为blob并上传到服务器 HTML <div class="container"> <!--读取要上传的文件--> <input type ...

随机推荐

  1. Java学习笔记(三)

    今天主要学习了ant ant概述 ant是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发.在实际软件开发中,有很多地方可以用到ant 开发环境: Sy ...

  2. leetcode Online Judge 150题 解答分析之一 Reverse Words in a String

    问题 Given an input string, reverse the string word by word. For example, Given s = "the sky is b ...

  3. &lt;button&gt; 标签 id 与 function 重复时发生的问题

    今天遇到一种情况,在调用js自定义方法的时候,总是提示“import:660 Uncaught TypeError: ... is not a function”. 仔细检查了代码,并没有问题.甚至把 ...

  4. 为你解惑之WPF经典9问详解

    本文解答了关于WPF的9个最常见的问题.从某种意义上讲,这两种技术是相互关联的:它们都是关于界面表现的技术,更进一步的,Silverlight是基于WPF的,是它的一个子集.不仅从理论上介绍了这两种技 ...

  5. linux 常用的基本命令

    $ ls # 查看文件列表 $ ls dir_name | more : 分页查看文件列表 $ ll -h dir_name # 以 KB.MB.GB格式查看文件大小 $ ll -Sh  # --so ...

  6. Java根据条件删除Map中元素

    今天在写程序过程中,需要根据判断条件删除一个Map中的相应数据,我自然而然想到可以通过调用Map中的remove(Object key)函数进行删除:代码如下: public Map<Doubl ...

  7. 响应式的dribbble作品集魔术布局展示效果

    在线演示1 本地下载 相信做设计的朋友肯定都知道dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话 ...

  8. iOS 进阶 第七天(0403)

    0403 QQ列表展开收起的原理 更改 numbersOfRowsInSection 的返回的数目,为0则收起group,不为零则为展开.先修改模型数据 刷新对应的表格 代码如下: 这个地方会出现一个 ...

  9. cursor的moveToNext()与moveToFirst()

    String sql = "select count(*) as c from sqlite_master where type ='table' and name ='" + t ...

  10. BZOJ 1706

    题解: 倍增+floyd 首先这题比较容易想到是把每个点拆点做dij 但是这样复杂度是knlogn的 这道题的k较大,所以不行 我们考虑到每走一步,其实就是在进行一次floyd 而这个可以看成矩阵乘法 ...