HTML5之fileReader异步读取文件及文件切片读取
- fileReader的方法与事件
- fileReade实现图片预加载
- fileReade实现文件读取进度条
- fileReade的与file.s实现文件切片读取
一、fileReader的方法与事件
1.方法
- FileReader.abort():终止读取操作。返回时,readyState属性为DONE。
- FileReader.readAsArrayBuffer():将文件读取为ArrayBuffer数据对象。
- FileReader.readAsBinaryString():将文件读取为二进制数据。
- FileReader.readAsDataURL():将文件读取为DataURL编码(base64)==>URL格式的字符串。
- FileReader.readAsText():将文件读取为文本==》字符串表示的文件内容。
2.事件
- FileReader.onloadstart:读取开始时触发
- FileReader.onprogress:读取中
- FileReader.onloadend:读取完成触发,无论成功或失败
- FileReader.onload:文件读取成功完成时触发
- FileReader.onabort:中断时触发
- FileReader.onerror:出错时触发
3.实现图片读取预览
在Web FileReader API接口实现之前,图片预览的通常做法是先将图片上传至服务器,上传成功以后通过过触发ajax请求到刚刚上传的图片,然后加载到页面。这个过程中如果图片选择错误或者需要修改上传的图片,就需要重复上传和下载请求,并且还需要在服务器替换图片资源,会浪费大量的网络资源和服务器资源。现在通过FileReader实现本地图片读取预览,就可以在本地实现图片修改,节省服务器资源。
既然是HTML5的API就目前来说肯定存在兼容性问题,目前IE10开始支持FileReader,所以通过服务上传下载的图片预览方式还是有必要的,接下来的示例仅仅展示FileReader的图片读取预览代码:
<style>
.imgBox{
display: flex;
width: 300px;
height: 300px;
border: 1px solid #300;
justify-content: center;
align-items: center;
}
</style>
<input type="file" name="">
<div class="imgBox"></div>
<script>
var imgBox = document.getElementsByClassName('imgBox')[0];
var reader = new FileReader(); //创建文件读取对象
var inp = document.getElementsByTagName('input')[0]; //获取文件源
inp.onchange = function(){ //input域发生改变后触发文件读取
reader.readAsDataURL(inp.files[0]); //使用文件读取对象读取图片为base64编码
}
reader.onload = function(e){ //当图片读取成功后触发
var img = new Image(); //创建img对象
img.src = e.target.result; //给img对象添加缓存中的bese64位编码的图片数据(异步)
img.onload = function(e){ //图片数据加载完成以后
if(this.width > this.height){ //当图片的宽度大于高度
img.style.width = '100%'; //是:设置图片宽度100%,实现图片全部预览
}else{
img.style.height = '100%';//否:设置图片高度100%,实现图片全部预览
}
imgBox.style.backgroundColor = '#000';
imgBox.innerHTML = null;
imgBox.appendChild(img);
}
}
</script>
4.实现文件加载进度条
在FileReader.onprogress事件对象中有两个属性loaded和total,loaded表示当前文件读取大小,total表示文件整体大小,并且在读取时会持续触发更新最新读取状态的数据,根据FileReader.onprogress事件就可以实现文件加载进度条的动画效果了,但是由于FileReader是h5的API在IE中最低兼容到10版本,所以需要根据具体的项目和兼容性来设计交互。
//css
.progress{
position: relative;
margin-top: 5px;
width: 300px;
height: 20px;
border: 1px solid #300;
}
.progressText{
display: inline-block;
position: absolute;
width: 300px;
height: 20px;
text-align: center;
font-size: 10px;
line-height: 20px;
}
.progressSpan{
display: inline-block;
/* width: 200px; */
height: 20px;
background-color: #f0f;
}
//html
<input type="file" name="">
<!-- 文件加载进度条 -->
<div class="progress">
<span class="progressText"></span>
<span class="progressSpan"></span>
</div>
//js
//获取文件源(所有功能实现的公共代码区)
var inp = document.getElementsByTagName('input')[0]; //获取文件源
var reader = new FileReader(); //创建文件读取对象
// fileReader实现图片加载进度条
var progressSpanObj = document.getElementsByClassName('progressSpan')[0];
var progressTextObj = document.getElementsByClassName('progressText')[0];
inp.onchange = function(){
reader.readAsArrayBuffer(inp.files[0]);
}
reader.onloadstart = function(e){ //开始读取文件时触发
progressTextObj.innerText = "正在读取文件(0%)...";
}
reader.onprogress = function(e){ //读取进度事件
console.log(Math.round(e.loaded / e.total * 100));
var precent = Math.round(e.loaded / e.total * 100);
progressSpanObj.style.width = precent / 100 * 300 + 'px';
progressTextObj.innerText = '正在读取文件(' + precent + '%)...';
}
reader.onload = function(e){
progressTextObj.innerText = '文件读取完成(100%)';
}
reader.onerror = function(e){
progressTextObj.innerText = "文件读取出错误(~0v0~)";
}
二、fileReade的与file.slice实现文件切片读取
通过input-type[file]获取的文件对象上有这样几个数据:
inputDom.files[0];//获取File对象(在onchange事件后获取)
File对象上的属性与方法:
- File():构造函数,返回一个新的文件对象
- File.lastModified:返回所引用文件最后的修改日期,为自 1970年1月1日0:00 以来的毫秒数。没有已知的最后修改时间则会返回当前时间。
- File.lastModifiedDate:返回当前File对象所引用文件最后修改事件的Date都西昂。
- File.name:返回当前File对象所引用文件的名字。
- File.size:返回文件的大小
- File.webkitRelativePath:返回Filex相关的path或URL(这是个非标准属性,chrome上获取的是一个空字符串)
- File.slice():文件对象上本身是没有方法的,slice方法同通过继承Blob对象上的slice方法实现的。
File对象说明手册(MDN):https://developer.mozilla.org/zh-CN/docs/Web/API/File
File.slice()方法说明手册(MDN):https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice
File.slice实现文件切片读取:
<!--样式同上面的进度条实例一样,这里就不添加了-->
<input type="file" name="">
<!-- 文件加载进度条 -->
<div class="progress">
<span class="progressText"></span>
<span class="progressSpan"></span>
</div>
//获取文件源(所有功能实现的公共代码区)
var inp = document.getElementsByTagName('input')[0]; //获取文件源
var reader = new FileReader(); //创建文件读取对象
// fileReader实现图片加载进度条
var progressSpanObj = document.getElementsByClassName('progressSpan')[0];
var progressTextObj = document.getElementsByClassName('progressText')[0];
//file.slice(起始字节,终止字节)与FileReader实现文件切片读取
function PartFileReader(files,type,event){
this.files = files;//inputObj.files[0]
this.type = type; //配置FileReader读取文件的方法
this.event = event;//配置读取文件时需要触发的事件
this.total = files.size;//获取文件大小
this.step = 1024 * 1024;//1MB(单片大小/一兆)
this.loaded = 0; //文件当前读取进度
this.reader = new FileReader(); //实际读取文件的FileReader对象实例
this.abort = this.reader.abort; //中断文件读取(可以通过中断文件读取事件保留切片数据,实现下一次可以在原读取位置继续开始读取)
this.readPartFile(this.loaded); //开启读取文件
this.bindEvent();//绑定FileReader文件读取
}
//给切片读取对象原型上添加FileReader获取读取类型,开启读取文件
PartFileReader.prototype.readPartFile = function(start){
if(this.files.slice){
var file = this.files.slice(start,this.loaded + this.step);
switch(this.type){
case 'readAsBinaryString' :
this.reader.readAsBinaryString(file);
break;
case 'readAsDataURL' :
this.reader.readAsDataURL(file);
break;
case 'readAsArrayBuffer' :
this.reader.readAsArrayBuffer(file);
break;
case 'readAsText' :
this.readAsText(file);
break;
}
}
}
//给切片读取对象原型上绑定FileReader对象事件
PartFileReader.prototype.bindEvent = function(){
var self = this;
this.reader.onloadstart = function(e){
self.event.loadStart && self.event.loadStart.call(this,e);
}
this.reader.onprogress = function(e){
self.event.progress && self.event.progress.call(this,e);
}
this.reader.onload = function(e){
// 切片读取文件有别于非切片读取,切片读取的文件读取状态需要在每个切片读取成功后再刷新读取进度
self.loaded += e.loaded;
self.event.load && self.event.load.call(this,e,self.loaded,self.total);
if(self.loaded < self.total){
self.readPartFile(self.loaded);
}
}
this.reader.onloadend = function(e){
self.event.loadend && self.event.loadend.call(this,e);
}
this.reader.onabort = function(e){
self.event.abort && self.event.abort.call(this,e);
}
}
//调用文件切片读取对象,配置FileReader事件函数
inp.onchange = function(){
var reader = new PartFileReader(inp.files[0],'readAsArrayBuffer',{
loadStart:function(e){
progressTextObj.innerText = "正在读取文件(0%)...";
},
progress:function(e){},
load:function(e,loaded,total){
// 如果在读取的基础上写上传的话在这里获取读取成功的文件切片
// e.target.result //当前文件切片的数据
// (但是千万别在这里直接写网络请求,本地读取的速度远远大于网络请求,直接请求一个文件就会在瞬间发起大量请求)
// (最好的处理方式是将切片数据写入一个有序列表中,然后通过控制网络请求数量来实现)
var precent = Math.round(loaded / total * 100);
progressSpanObj.style.width = precent / 100 * 300 + 'px';
if(precent < 100){
progressTextObj.innerText = '正在读取文件(' + precent + '%)...';
}else if(precent == 100){
progressTextObj.innerText = '文件读取完成(100%)';
}
},
loadend:function(e){},
abort:function(e){},
error:function(e){
progressTextObj.innerText = "文件读取出错误(~0v0~)";
}
})
}
HTML5之fileReader异步读取文件及文件切片读取的更多相关文章
- HTML5 之 FileReader 方法上传并读取文件
原文地址:https://caochangkui.github.io/file-upload/ HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据 ...
- FileReader:读取本地图片文件并显示
最近忙得比狗还惨,导致长时间没能更新文章,真心对不住啊.抽空整理了下关于在页面上读取和显示本地图片的实例文章,本文通过实例讲解如何使用支持FileReader浏览器的用户将能够通过一个file inp ...
- 使用js-xlsx库,前端读取Excel报表文件
在实际开发中,经常会遇到导入Excel文件的需求,有的产品人想法更多,想要在前端直接判断文件内容格式是否正确,必填项是否已填写 依据HTML5的FileReader,可以使用新的API打开本地文件(参 ...
- 前端读取Excel报表文件
在实际开发中,经常会遇到导入Excel文件的需求,有的产品人想法更多,想要在前端直接判断文件内容格式是否正确,必填项是否已填写 依据HTML5的FileReader,可以使用新的API打开本地文件(参 ...
- JS 异步分段上传文件
为了解决大文件上传 (PHP上传最大限制2GB) 同时为了解决文件上传是对服务器造成的压力 可以通过分段上传解决这个问题,这得益于HTML5开发的file API 前台代码: 引用了进度条插件myPr ...
- Java file文件的写入和读取及下载
File文件的写入 一.FileWriter 和BufferedWriter 结合写入文件 FileWriter是字符流写入字符到文件.默认情况下,它会使用新的内容代替文件原有的所有内容,但是,当指定 ...
- JAVA文件的两种读取方法和三种写入方法
在使用java对文件进行读写操作时,有多种方法可以使用,但不同的方法有不同的性能. 此文对常用的读写方法进行了整理,以备不时之需. 1.文件的读取 主要介绍两种常用的读取方法.按行读取和按字符块读取. ...
- JavaScript进阶(六)用JavaScript读取和保存文件
用JavaScript读取和保存文件 因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了.而出于安全原因,只有IE才提供访问文件的API:但随着HTML 5的到来, ...
- JavaIO流——简单对文件的写入及读取(二)
前文对Io字符流的输入进行了介绍,在这就不再讲了,简单的来写该怎么读取文件内容吧 public static void readFile(String Filename) throws IOExcep ...
随机推荐
- 1.2 Go语言基础之变量和常量
变量和常量是编程中必不可少的部分,也是很好理解的一部分. 一.标识符与关键字 1.1 标识符 在编程语言中标识符就是程序员定义的具有特殊意义的词,比如变量名.常量名.函数名等等. Go语言中标识符由字 ...
- SMARTY核心
http://www.smarty.net/http://smarty.php.net/manual/en/ 1.配置 define("ROOTPATH",dirname(__FI ...
- RabbitMQ学习之:(七)Fanout Exchange (转贴+我的评论)
From:http://lostechies.com/derekgreer/2012/05/16/rabbitmq-for-windows-fanout-exchanges/ PunCha: Ther ...
- WPF学习笔记 - .Net Framework的分离存储技术
写入: protected override void OnClosed(EventArgs e) { base.OnClosed(e); IsolatedStorageFile f = Isolat ...
- 001-软件架构概览、maven补充【分包工程、合并包、web容器插件】、git补充
一.整体概述 1.1.共性问题 技术瓶颈.不成体系.不能实际使用.不能落地.无法入门 1.2.目标-软件架构 专注于构建:高可扩展.高性能.大数据量.高并发.分布式的系统架构. 各项技术.组合构建分布 ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_4-02 微服务调用方式之ribbon实战 订单调用商品服务
笔记 2.微服务调用方式之ribbon实战 订单调用商品服务 简介:实战电商项目 订单服务 调用商品服务获取商品信息 1.创建order_service项目 2 ...
- 分布式存储ceph--添加/删除osd(5)
一.添加osd: 当前ceph集群中有如下osd,现在准备新添加osd:
- LVS系列一、LVS集群-NAT模式
一. 集群概述 1. 什么是集群? 一组各自相互独立且又相互依赖的,通过高速网络互联的计算机组成的一个计算机组, 以单一的系统模式加以管理, 为用户提供服务, 对用户来说, 用户只会认为对方是一个服务 ...
- UnicodeDecodeError: 'utf-8' codec can't decode byte 0xb9 in position 16: invalid start byte
读取一个csv文件失败,提示: UnicodeDecodeError: 'utf-8' codec can't decode byte 0xb9 in position 16: invalid sta ...
- Pytorch-tensor的维度变化
引言 本篇介绍tensor的维度变化. 维度变化改变的是数据的理解方式! view/reshape:大小不变的条件下,转变shape squeeze/unsqueeze:减少/增加维度 transpo ...