浅谈HTML5 FileReader分布读取文件以及其方法简介
发布时间：2017-11-09 15:16:19 作者：C_Kite 
我要评论
我要评论本篇文章主要介绍了浅谈HTML5 FileReader分布读取文件以及其方法简介，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文介绍了浅谈HTML5 FileReader分布读取文件以及其方法简介，分享给大家。具体如下：
效果图
老规矩先上效果图
先介绍一下H5中FileReader的一些方法以及事件
FileReader方法
| 名称 | 作用 |
|---|---|
| about() | 终止读取 |
| readAsBinaryString(file) | 将文件读取为二进制编码 |
| readAsDataURL(file) | 将文件读取为DataURL编码 |
| readAsText(file, [encoding]) | 将文件读取为文本 |
| readAsArrayBuffer(file) | 将文件读取为arraybuffer |
FileReader事件
| 名称 | 作用 |
|---|---|
| onloadstart | 读取开始时触发 |
| onprogress | 读取中 |
| onloadend | 读取完成触发，无论成功或失败 |
| onload | 文件读取成功完成时触发 |
| onabort | 中断时触发 |
| onerror | 出错时触发 |
代码
分布读取文件核心思想, 将文件分块以每M进行读取.
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<fieldset>
<legend>分步读取文件：</legend>
<input type="file" id="File">
<input type="button" value="中断" id="Abort">
<p>
<lable>读取进度：</lable>
<progress id="Progress" value="0" max="100"></progress>
</p>
</fieldset>
</form>
<script src="./loadFile.js"></script>
<script>
var progress = document.getElementById('Progress');//进度条
var events = {
load: function () {
console.log('loaded');
},
progress: function (percent) {
console.log(percent);
progress.value = percent;
},
success: function () {
console.log('success');
}
};
var loader;
// 选择好要上传的文件后触发onchange事件
document.getElementById('File').onchange = function (e) {
var file = this.files[0];
console.log(file)
//loadFile.js
loader = new FileLoader(file, events);
};
document.getElementById('Abort').onclick = function () {
loader.abort();
}
</script>
</body>
</html>
loadFile.js部分
/*
* 文件读取模块
* file 文件对象
* events 事件回掉对象 包含 success , load, progress
*/
var FileLoader = function (file, events) {
this.reader = new FileReader();
this.file = file;
this.loaded = 0;
this.total = file.size;
//每次读取1M
this.step = 1024 * 1024;
this.events = events || {};
//读取第一块
this.readBlob(0);
this.bindEvent();
}
FileLoader.prototype = {
bindEvent: function (events) {
var _this = this,
reader = this.reader;
reader.onload = function (e) {
_this.onLoad();
};
reader.onprogress = function (e) {
_this.onProgress(e.loaded);
};
// start 、abort、error 回调暂时不加
},
// progress 事件回掉
onProgress: function (loaded) {
var percent,
handler = this.events.progress;//进度条
this.loaded += loaded;
percent = (this.loaded / this.total) * 100;
handler && handler(percent);
},
// 读取结束（每一次执行read结束时调用，并非整体）
onLoad: function () {
var handler = this.events.load;
// 应该在这里发送读取的数据
handler && handler(this.reader.result);
// 如果未读取完毕继续读取
if (this.loaded < this.total) {
this.readBlob(this.loaded);
} else {
// 读取完毕
this.loaded = this.total;
// 如果有success回掉则执行
this.events.success && this.events.success();
}
},
// 读取文件内容
readBlob: function (start) {
var blob,
file = this.file;
// 如果支持 slice 方法，那么分步读取，不支持的话一次读取
if (file.slice) {
blob = file.slice(start, start + this.step);
} else {
blob = file;
}
this.reader.readAsText(blob);
},
// 中止读取
abort: function () {
var reader = this.reader;
if(reader) {
reader.abort();
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
HTML与XHTML、以及HTML4与HTML5标签之间的区别简介
这篇文章主要介绍了HTML与XHTML、以及HTML4与HTML5标签之间的区别,是网页前端编程入门学习中的基础知识,需要的朋友可以参考下2015-11-07- 这篇文章主要介绍了HTML5的一个显示电池状态的API简介,由Mozilla设计,具体的设备和浏览器支持情况还要通过检测才能确定,需要的朋友可以参考下2015-06-18
- 随着Windows8正式版发布的脚步近在咫尺，近来关于Win8、IE10、HTML5的新闻逐渐增多，很多朋友对于Win8系统以及IE10浏览器都比较了解，但对于HTML5是什么还真有不少朋友不清2012-10-26
- 前言：HTML5出现后，网络安全更加受到广泛的关注。Web对于网络安全有哪些改进？我们如何来面对越来越危险的网络欺诈和攻击？下面的文章谈到了W3C对于这个问题的最新解决方2012-07-10
- 本文主要介绍了HTML5的标签.不同于以前的标签.更简单.更方便2012-05-28
html5新增的定时器requestAnimationFrame实现进度条功能
html5为什么新增一个requestAnimationFrame，他的出现是为了解决什么问题？带着这些问题跟随脚本之家小编一起学习吧2018-12-13- 下面小编就为大家带来一篇HTML5新增加的功能详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-05
- 大多数移动应用，不管是企业移动应用还是互联网移动应用，90%都可以使用基于HTML5的Web技术就足够2013-12-13
这篇文章主要介绍了html5简介及新增功能介绍,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-18
最新评论