对于截取读入的文件,一定要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. ZeroMQ(java)之负载均衡

    我们在实际的应用中最常遇到的场景如下: A向B发送请求,B向A返回结果.... 但是这种场景就会很容易变成这个样子: 很多A向B发送请求,所以B要不断的处理这些请求,所以就会很容易想到对B进行扩展,由 ...

  2. 使用JDBC获取各数据库的Meta信息——表以及对应的列

    先贴代码,作为草稿: 第一个是工具类, MapUtil.java [java] view plain copy import java.util.ArrayList; import java.util ...

  3. 影像工作站的数据库安装错误之Win7系统下pg服务无法启动

    1.关闭批处理 2.修改 PG安装路径下的Data文件下的pg_hba.conf文件中去掉IPv6的井号,如下图 3.结束pg进程 4.重启PG服务.

  4. python遍历数组的两种方法

    第一种,最常用的,通过for in遍历数组 1 2 3 4 5 6 7 8 colours = ["red","green","blue"] ...

  5. python安装问题

    安装MinGW之后 出现.. 解决方案 ================

  6. mysql in 查询优化

    2014年11月29日21:01:01 场景:有的时候查询数据库的select in 语句中会有非常多不连续的数值,会很影响查询效率 方法:将select in 查询转换成多个select betwe ...

  7. (转)使用SQLCMD在SQLServer执行多个脚本

    概述: 作为DBA,经常要用开发人员提供的SQL脚本来更新正式数据库,但是一个比较合理的开发流程,当提交脚本给DBA执行的时候,可能已经有几百个sql文件,并且有执行顺序,如我现在工作的公司,十几个客 ...

  8. Linux卸载系统自带的JDK

    安装Linux后,一般系统都会自带openjdk,我们开发中都需要自己安装,所以需要卸载之前的,以CentOS为例,卸载方法如下: 首先执行命令查看存在哪些已安装的包 rpm -qa | grep j ...

  9. Linux下配置JDK

    下面以CentOS为例,详细说一下Linux下配置JDK的过程 首先按照约定俗成的习惯,将jdk放在/usr/local/java下,首先进入/usr/local然后新建一个目录java 然后我们需要 ...

  10. JavaScript设计模式 - 迭代器模式

    迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺 ...