一、默认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来读取文件。

    利用FileReader来读取文件的能够来实现即时预览的效果,这个也是在html5中才有的功能. <!DOCTYPE html> <html lang="en"& ...

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

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

  7. HTML5之fileReader异步读取文件及文件切片读取

    fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...

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

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

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

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

随机推荐

  1. 【HTTP】Speed and Mobility: An Approach for HTTP 2.0 to Make Mobile Apps and the Web Faster

    This week begins face to face meetings at the IETF on how to approach HTTP 2.0 and improve the Inter ...

  2. 深入了解一下PYTHON中关于SOCKETSERVER的模块-B

    请求多个文件的原型. 这个是最草的情况,就是硬编码到内存中的字符串, 真实的应用还是会转到其它端口处理,或是读到硬盘上的文件吧. #!/usr/bin/env python from BaseHTTP ...

  3. [cocos2d]关于CCSprite的若干问题与误区

    文章 [cocos2d] 利用texture atlases生成动画 中介绍了如何生成动画并绑定在CCSprite实例上. 使用该代码遇到了几个问题,值得mark下 问题1.多实例 问题描述: 新建一 ...

  4. 常见的Robotium测试的问题总结:

    常见的Robotium测试的问题总结:(从别处拿来的先mark一下) 1.Robotium的 测试类ActivityInstrumentationTestCase2继承了TestCase类,即robo ...

  5. (转载)如何优化MySQL insert性能

    (转载)http://blog.csdn.net/tigernorth/article/details/8094277 对于一些数据量较大的系统,面临的问题除了是查询效率低下,还有一个很重要的问题就是 ...

  6. Selenium如何实现dropbar移动

    遇到这个拖拽的dropbar,如何实现呢,, 经过网上查找,可以用Action的方式实现或者js来控制 原理:移动按钮的同时,数字也随着变化 解决方法:1.最简单的就是直接在文本框输入相应的数字 2. ...

  7. 关于View和VIewController的关系和理解

    之前看过关老师的视频之后就有写关于视图切换的程序,不过那是很久之前了,那时候也不知道什么是View,什么是VIewController,就知道照着写.这次项目的时候,我又碰到了这个问题,我自以为比较能 ...

  8. 安装 PLSQL笔记

    安装 PLSQL Developer 1. 下载PLSQL Developer 安装文件.安装文件类型是exe,直接安装就可以. 这个时候打开PLSQL Developer ,打开 help –> ...

  9. 转 :hdoj 4857 逃生【反向拓扑】

    逃生 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  10. sencha touch 框架的几种核心脚本文件之间的区别

    sencha-touch-debug.js      供开发时用sencha-touch.js   供发布时用sencha-touch-all.js All     供不能使用SDK构建应用程序时,将 ...