1:FileReader : 读取文件内容
readAsText()
: 读取文本文件,(可以使用Txt打开的文件)readAsBinaryString()
: 读取任意类型的文件,返回二进制字符串readAsDataURL
: 方法可以将读取到的文件编码成DataURL ,可以将资料(例如图片、excel文件)内嵌在网页之中,不用放到外部文件abort
: 中断读取
2:FileReader : 捕获读取文件的状态
onabort
:读取文件断片时触发onerror
:读取文件错误时触发onload
:文件读取成功时触发onloadend
:文件读取完毕之后,不管成功还是失败触发onloadstart
: 开始读取文件时触发onprogress
:读取文件过程中触发
使用:
html部分:
<form action="http://www.baidu.com" enctype="mulitipart/form-data">
<input id="ipnut_file" type="file" name="fileImg" accept="image/*">
<img id="view_img" src="">
</form>
js部分:
const viewImg = document.getElementById('view_img');
const files = document.getElementById('ipnut_file').files;
if(files && files[0]) {
if(window.FileReader) {
const reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = () => {
viewImg.setAttribute('src', reader.result);
}
}
}