对于截取读入的文件,一定要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读取流注意事项的更多相关文章

  1. HTML5 FileReader读取Blob对象API详解

    使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用 ...

  2. html5 filereader 读取图片信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  4. 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...

  5. FileReader读取文件详解

    FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <in ...

  6. FileReader读取文件

    前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...

  7. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  8. 使用html5 FileReader获取图片,并异步上传到server(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到server(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax.把图片的base64编 ...

  9. 使用 html5 FileReader 获取图片, 并异步上传到服务器 (不使用 iframe)

    为什么80%的码农都做不了架构师?>>>   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码post到服务器. 3.根据 ...

随机推荐

  1. Google Chrome浏览器调试入门————转载只为自己查看方便

    Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...

  2. NYOJ 61传纸条(一) 双线程DP问题

    http://www.cnblogs.com/HpuAcmer/archive/2012/05/06/2486591.html 题目链接:http://acm.nyist.net/JudgeOnlin ...

  3. Linux: xclip,pbcopy,xsel用法 terminal 复制粘帖 (mac , ubuntu)

    ubuntu下的用户可以只用apt-get来安装: sudo apt-get install xclip echo "Hello, world" | xclip mac下使用pbc ...

  4. 深入学习微框架:Spring Boot - NO

    http://blog.csdn.net/hengyunabc/article/details/50120001 Our primary goals are: Provide a radically ...

  5. xml 解析 java 基础复习

    document  解析 sax  解析 dom4j 解析(摘自csdn redarmychen) dom4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个非常 ...

  6. 修改Tomcat服务器的默认端口号

    tomcat服务器的默认端口号是8080,我们也可以修改为其他端口号,并且在没有启动Apache,IIS等占用80端口的web服务时,我们也可以设置为80端口,这样在生产中域名之后就可以不带端口号了, ...

  7. MFC LIST 获取行数和列数

    DWORD dwStyle = dataListControl.GetExtendedStyle(); dwStyle |= LVS_EX_FULLROWSELECT;//选中某行使整行高亮(只适用与 ...

  8. Java虚拟机支持的最大内存限制

    最近在开发Java的程序.本来我是一直很喜欢Java的内存管理的,不需要担心分配内存,只管分配,垃圾收集器自己会给你回收内存的.现在开发的程序数据量很大,为了速度快,我准备把所有的信息加载进内存,这样 ...

  9. surface RT app安装心得

    打开store,然后在键盘输入字母,就出现搜索栏了. 想安装qq,但是输入后找不到软件,原因是我在初始化系统的时候,我的所在地选择的是新加坡,因此找不到软件.在屏幕右下方的setting,然后将所在地 ...

  10. 如何手动修改XP系统属性中的技术支持信息

    \windows\system32目录下有个oeminof.ini,里面是OEM显示的文字信息,把相应项目修改即可,OEM图片使用的是本目录下的OEMlogo.bmp(图片:创建一个图形文件,像素尺寸 ...