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.根据 ...
随机推荐
- doTjs源码研究笔记
首先是入口方法 /*tmpl:模板文本 c:用户自定义配置 def:定义编译时执行的数据*/doT.template = function(tmpl, c, def) { } 然后进入第一句代码 c ...
- 安装mac os x时about a second remaining解决方法
转自: http://www.hongkiat.com/blog/clean-install-mavericks/ During the installation process, you may e ...
- 如何使用box2d做碰撞检测
cocos2dx3.0+vs2012编译通过. 主要是通过body->SetTransform来设置body的位置和角度,然后自己写个ContactListener来监听碰撞事件 源代码下载 # ...
- iOS 端的第三方语音识别库
最近在看语音识别方面的库,主要看了2个收费的项目,一个是 At&t 的,一个是Nuance的.这2个项目虽然是收费的,但是仅仅测试的话,是免费的,连接如下 https://developer. ...
- 使用eclipse开发Java web应用
前面说了手动配置一个应用,手动配置可以更深入的理解web应用的分布,但是一般的编辑器没有语法错误提示,所以开发起来对于错误的寻找不太容易,效率相对较低,所以在理解清楚web项目的结构之后,我们使用ec ...
- Java for LeetCode 072 Edit Distance【HARD】
Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...
- DP:Coins(POJ 1742)
用硬币换钱 题目大意:就是有面值为A1,A2,A3....的硬币,各有C1,C2,C3...的数量,问在钱数为m的范围内,能换多少钱?(不找零) 这题看名字就知道是完全背包,但是这题又有点不一样, ...
- BSD学习(BSD系统的历史和目标)
UNIX系统的历史 unix系统的发展历程大概经历以下几个阶段: 贝尔实验室(Bell Laboratories)阶段,该实验室发明了UNIX 加州大学伯克利分校(University of Cali ...
- oracle的数据库,随笔
不多说,看代码 select b.*,a.kscj,a.paiming from (select t.kch,t.kcm,t.kscj,t.xh, rank() over (order ...
- gdalwarp切割tif参数
可以去gdal官网查询gdalwarp工具的参数,但是具体的还是不知道怎么写,例如内置数据类型-ot 和压缩-co参数. 这里有一个经过雁阵更可以使用的参数 gdalwarp -te lon1 lat ...