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

//读取文本文件实例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);    }}

<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>

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 = http://www.mamicode.com/(_this.loaded / _this.total) * 100;        _this.percent.innerText = value;        _this.progress.value = value;    },    //中止上传事件    onAbort: function () {        var _this = read;        //console.log(‘读取操作操作中止,‘+_this.loaded);    },    //当出现异常时    one rror: function () { },    //读取成功  结束    onl oad: 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();

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();        }    },    //开始读取文件    onl oadStrart: function () { },    //读取过程    onProgress: function (e) {        var _this = read;        //e.loaded 当前读取的数量        //e.total 读取总量        _this.loaded += e.loaded;        //更新进度条        _this.progress.value = http://www.mamicode.com/(_this.loaded / _this.total) * 100;    },    //中止上传事件    onAbort: function () { },    //当出现异常时    one rror: function () { console.log(‘读取出错‘); },    //读取成功  结束    onl oad: 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    onl oadEnd: 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();