html5 filereader读取流注意事项
对于截取读入的文件,一定要new FileReader,不可写全局调用同一个reader.

错误代码!!!
function readAsBinaryString(file,callback){
readrSpt(); var part= 0,fileName=file.name,
step=1024*10,start= 0, a=0,b= 0,total=file.size,loaded= 0,reader=new FileRead(),fileType=file.type;///这样写是错的,将导致reader流不在是同步读取 //$("#fileLink").attr("href",URL.createObjectURL(blob));
//将文件以arraybuffer形式读入
(function(start){
var blob=file.slice(start,start+step+1),self=arguments.callee;// console.log(blob)
reader.readAsArrayBuffer(blob);
reader.onprogress=function(e){
loaded+=e.loaded;
var per=loaded/total;
if(loaded==total){
per=100;
callback(this.result,part,fileName,fileType,true);
}else{
per*=100;
callback(this.result,part);
part++;
}
}
reader.onload=function(e){
console.log(loaded)
if(loaded<total){
self(loaded);
// callback(this.result);
}else{
loaded=total;
}
}
})(start);
}

------------------------------------------------------------------------------------------------------------------------------------------------------------------------
正确代码
function readAsBinaryString(file,callback){
readrSpt(); var part= 0,fileName=file.name,
step=1024*10,start= 0, a=0,b= 0,total=file.size,loaded= 0,fileType=file.type; //$("#fileLink").attr("href",URL.createObjectURL(blob));
//将文件以arraybuffer形式读入
(function(start){
var blob=file.slice(start,start+step+1),reader = new FileReader(),self=arguments.callee;
// console.log(blob)
reader.readAsArrayBuffer(blob);
reader.onprogress=function(e){
loaded+=e.loaded;
var per=loaded/total;
if(loaded==total){
per=100;
callback(this.result,part,fileName,fileType,true);
}else{
per*=100;
callback(this.result,part);
part++;
}
}
reader.onload=function(e){
console.log(loaded)
if(loaded<total){
self(loaded);
// callback(this.result);
}else{
loaded=total;
}
}
})(start);
} 转载来源:http://www.cnblogs.com/tom-chang/p/4060650.html
html5 filereader读取流注意事项的更多相关文章
- HTML5 FileReader读取Blob对象API详解
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用 ...
- html5 filereader 读取图片信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5 文件域+FileReader 读取文件(一)
在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.File ...
- 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)
使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...
- FileReader读取文件详解
FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <in ...
- FileReader读取文件
前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- 使用html5 FileReader获取图片,并异步上传到server(不使用iframe)
使用html5 FileReader获取图片,并异步上传到server(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax.把图片的base64编 ...
- 使用 html5 FileReader 获取图片, 并异步上传到服务器 (不使用 iframe)
为什么80%的码农都做不了架构师?>>> 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码post到服务器. 3.根据 ...
随机推荐
- [POJ1338]Ugly Numbers
[POJ1338]Ugly Numbers 试题描述 Ugly numbers are numbers whose only prime factors are 2, 3 or 5. The sequ ...
- myeclipse2014破解过程
之前装的是10,后来没事试试装了2014,然后再破解2014后发现2010的证书就失效了,之前在网上也没找到方法,这段时间也没管,今天又自己想办法试了试,发现成功了!下边是我在网上找的破解方法的破解步 ...
- DataSnap 用TStream 传递大数据 返回流大小为-1的情况
DataSnap可以直接传递和返回TStream类型的参数,这点是很方便的.但是很多人发现好像大小稍微大点就工作不正常了,就变相使用其它类型转换来转换去,这样便利性就失去了. 官方有篇博客很详细的介绍 ...
- error adding symbols: DSO missing from command line collect2: error: ld returned 1 exit status
Windows服务器Azure云编译安装MariaDB教程 www.111cn.net 编辑:future 来源:转载 安装MariaDB数据库最多用于linux系统中了,下文给各位介绍在Window ...
- datetime中strftime和strptime用法
from datetime import * format = "%Y-%m-%d %H:%M:%S" a=datetime.now() day=a.day b=a.replace ...
- Nested List Weight Sum I & II
Nested List Weight Sum I Given a nested list of integers, return the sum of all integers in the list ...
- 关于Linux下进程间使用共享内存和信号量通信的时的编译问题
今天在编译一个使用信号量实现进程同步时,出现了库函数不存在的问题.如下图 编译结果实际上是说,没include相应的头文件,或是头文件不存在(即系统不支持该库函数) 但我man shm_open是可以 ...
- Emacs 从入门到精通
1 前言 不想再说废话了,既然你会阅读这篇文档,说明你多少对Emacs有 些兴趣,或者已 经非常熟悉Emacs的基础操作了,并且希望有所提高.因此我不需要再把"编辑器 之神,还是神的编辑器& ...
- js将map转换成数组
/** * map转数组. * * @param {Map}map * map对象 * @return 数组 */ Share.map2Ary = function(map) { var list = ...
- Maven运行时异常java.lang.UnsupportedClassVersionError的解决方案
我用的Maven版本为最新版:3.3.9,但是我执行一个简单的clean命令会报如下错误: Exception in thread "main" java.lang.Unsuppo ...