我们在实现文件上传的时候,一般会使用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: