我们在实现文件上传的时候,一般会使用input标签,把input的type类型设置为file,这样就可以打开文件窗口选择需要上传的文件,
点击按钮,上传文件后文件有关的信息可以在input.files这个数组中取得,主要包括:
1)name: 文件名;
2)size:文件的大小;
3)type: 文件的MIME类型;
以上file对象只获取到了对文件的描述信息,但没有获得文件中的数据。
我们可以通过HTML5提供的FileReader读取到文件中的内容;
-
FileReader的使用场景
实现在线预览本地图片;
一般情况下,我们实现图片上传都会先将图片文件上传到服务器,上传成功后,由后台返回图片的网络地址,再通过图片的地址在前端加载图片显示出来。而通过fileReader可以在浏览器的主线程中异步访问文件系统,将本地图片文件加载到本地内存中,然后赋予某个javaScript变量,接着调用FileReader
的readAsDataURL方法将图片读取成DataURL,从而展示图片。
这样的处理方式我们可以不经过后台,直接将本地图片显示在页面上,减少了前后端频繁交互的过程,减少服务端无用的图片资源。
所以,我们通常可以通过FileReader先预览本地图片效果,确定是想要上传的图片时再调用接口上传到图片服务器。
-
FileReader的常用方法:
FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。
1) readAsBinaryString ======> 将文件读取为二进制编码
readAsBinaryString函数会按字节读取文件内容。 尽管readAsBinaryString方法可以按字节读取文件,但由于读取后的内容被编码为字符,大小会受到影响,故不适合直接传输,不推荐使用。 如:测试的图片文件原大小为6764 字节,而通过readAsBinaryString读取后,内容被扩充到10092个字节2) readAsText ======> 将文件读取为文本
readAsText读取文件的单位是字符,故对于文本文件,只要按规定的编码方式读取即可; 而对于媒体文件(图片、音频、视频),其内部组成并不是按字符排列,故采用readAsText读取,会产生乱码,同时也不是最理想的读取文件的方式3) readAsDataURL ======> 将文件读取为DataURL
文件将会以Base64编码格式输出4) readAsArrayBuffer ======> 将文件读取为ArrayBuffer对象(一段存放二进制数据的空间)
readAsArrayBuffer方法会按字节读取文件内容,并转换为ArrayBuffer对象。文件读取后大小,与原文件大小一致。(这是其与readAsBinaryString的区别)
该方法读取文件后,会在内存中创建一个ArrayBuffer对象,将二进制内容放在此对象中,进行网络传输。
- abort ======> 中断读取
-
接口事件
1) onabort 中断
2) onerror 出错
3) onloadstart 开始
- onprogress 正在读取
5) onload 成功读取
- onloadend 读取完成时触发,无论读取成功还是失败
-
FileReader的使用
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
#img{
width:400px;
height:300px;
margin:20px;
}
</style>
</head>
<body>
<input type="file" id="inputBox"/>
<br/>
<input type="file" id="inputBox1"/>
<br/>
<input type="file" id="inputBox2"/>
<br/>
<input type="file" id="inputBox3"/>
<br/>
<img src="" id="img">
</body>
<script>
let input=document.getElementById("inputBox");
input.onchange = function(){
var file = this.files[0];
if(!!file){
var reader = new FileReader();
// 图片文件转换为base64
reader.readAsDataURL(file);
reader.onloadstart=function(){
console.log("开始读取文件");
}
reader.onprogress=function(){
console.log("正在读取文件");
}
reader.onabort=function(){
console.log("中断读取文件");
}
reader.onload = function(){
console.log("成功读取");
// 显示图片
document.getElementById("img").src = this.result;
}
reader.onloadend=function(){
console.log("读取文件完毕");
}
}
}
let inputBox1=document.getElementById("inputBox1");
inputBox1.onchange=function(){
let file =this.files[0];
if(file){
let reader = new FileReader();
// 文件读取为文本
reader.readAsText(file);
reader.onload=function(){
console.log("readAsText",this.result);
}
}
}
let inputBox2=document.getElementById("inputBox2");
inputBox2.onchange=function(){
let file =this.files[0];
if(file){
let reader = new FileReader();
// 文件读取为二进制编码
reader.readAsBinaryString(file);
reader.onload=function(){
console.log("readAsBinaryString",this.result);
}
}
}
let inputBox3=document.getElementById("inputBox3");
inputBox3.onchange=function(){
let file =this.files[0];
if(file){
let reader = new FileReader();
// 文件读取为ArrayBuffer对象,对外不可见
reader.readAsArrayBuffer(file);
reader.onload=function(){
console.log("readAsArrayBuffer",this.result);
}
}
}
</script>
</html>
本文介绍HTML5的FileReader接口用于在浏览器中预览本地图片。通过FileReader,可以异步读取文件内容,将图片转化为DataURL显示在页面上,减少前后端交互,提高效率。主要方法包括readAsDataURL、readAsBinaryString等,配合各种事件监听读取状态。

被折叠的 条评论
为什么被折叠?



