new FileReader() 文件上传

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);
    }
  }
}

上一篇:python csv 的两种创建文件和读取文件的方式


下一篇:软件定义网络基础---REST API的设计规范