HTML5创建一个文件域,HTML5 文件域+FileReader 分段读取文件(五)

这段代码展示了如何使用JavaScript的FileReader API来处理文件上传的进度。它初始化了文件读取状态、进度条和百分比显示,并在文件选择后绑定读取事件。通过onProgress事件更新进度条,onLoad事件处理读取成功,onAbort处理中断操作。整个过程通过读取Blob块并按步长读取来实现。
摘要由CSDN通过智能技术生成

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 = newFileReader();//绑定信息和事件

_this.total =file.size;

reader.οnlοadstart=_this.onLoadStrart;

reader.οnprοgress=_this.onProgress;

reader.οnabοrt=_this.onAbort;

reader.οnerrοr=_this.onError;

reader.οnlοad=_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 = newInt32Array(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;varblob,

file=_this.file;

_this.times+= 1;

console.info('start:' +start);

blob= file.slice(start, start +_this.step);

_this.reader.readAsArrayBuffer(blob);

}

};

read.init();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值