js读取input[type=file]图片,以及预览

#前言

之前为了实现input[type=file]选择图片后实时展示图片,是把图片上传后,后端返回路径再显示
感觉多此一举,这样的方法实在太笨了,也太慢了,也就摸索出另一种方法 FileReader

#FileReader 属性和方法

来看下FileReader的属性和方法

#属性

FileReader.error 只读
一个DOMException,表示在读取文件时发生的错误 。

FileReader.readyState 只读
表示FileReader状态的数字。取值如下:

常量名 描述
EMPTY 0 还没有加载任何数据.
LOADING 1 数据正在被加载.
DONE 2 已完成全部的读取请求.

FileReader.result 只读
文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。

#事件处理

FileReader.onabort
处理abort事件。该事件在读取操作被中断时触发。

FileReader.onerror
处理error事件。该事件在读取操作发生错误时触发。

FileReader.onload
处理load事件。该事件在读取操作完成时触发。

FileReader.onloadstart
处理loadstart事件。该事件在读取操作开始时触发。

FileReader.onloadend
处理loadend事件。该事件在读取操作结束时(要么成功,要么失败)触发。

FileReader.onprogress
处理progress事件。该事件在读取Blob时触发。

因为 FileReader 继承自EventTarget,所以所有这些事件也可以通过addEventListener方法使用。

#方法

FileReader.abort()
中止读取操作。在返回时,readyState属性为DONE。

FileReader.readAsArrayBuffer()
开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.

FileReader.readAsBinaryString()
开始读取指定的Blob中的内容。一旦完成,result属性中将包含所读取文件的原始二进制数据。

FileReader.readAsDataURL()
开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。

FileReader.readAsText()
开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个字符串以表示所读取的文件内容。

那我们就知道要用到那些事件和方法了

文档来源

#开始

#html

1
2
3
<input type="file" id="file"/>
<img src="" id="img"/>
<p id="text"></p>

#js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
document.querySelector('#file').onchange = function (){
if(this.files.length){
let file = this.files[0];
let reader = new FileReader();
//新建 FileReader 对象
reader.onload = function(){
// 当 FileReader 读取文件时候,读取的结果会放在 FileReader.result 属性中
document.querySelector('#img').src = this.result;
document.querySelector('#text').innerHTML = this.result;
};
// 设置以什么方式读取文件,这里以base64方式
reader.readAsDataURL(file);
}
}
</script>

#结果

image