通过fileReader实现图片的实时预览

FileReader方法:

  1. readerText():读取文本文件,可以使用TXT打开的文本文件,返回的是字符串形式,默认的编码格式是utf-8.
  2. readAsBinaryString():读取任意类型的文件,返回的是二进制数据,后台接受后可以存储到数据库
  3. readAsDataURL():读取文件获取一段以data开头的字符串。DataURL是将资源转换为base64编码的字符串,文本一般是图像文本。
  4. abort():中端读取。

FileReader提供的一些完整的事件:

  1. onbort:读取文件中断片时触发。
  2. onerror:读取文件错误时候时触发。
  3. onload:文件读取成功后触发的事件。
  4. onloadend:读取完成时触发,无论成功还是失败。
  5. onloadstart:开始读取时候触发。
  6. onprogress:读取文件过程中触发事件。

实例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--实现图片的实时预览  onchange改变元素后触发方法-->
<from>
    文件: <input type="file" name="myFile" id="myFile" multiple onchange="getFileContext()"><br>
    <img id="img"><br>
    <input type="submit">
</from>
<script>
function getFileContext() {
       var reader=new FileReader();
       //需要的参数是图片
        var file=document.querySelector("#myFile").files;
       // 没有返回值,将其结果储存在result中,无法判断文件是否读完
       reader.readAsDataURL(file[0]);
  reader.onload=function () {
  //    展示出来:得到的reader.result为二进制文件base64  data:image/jpeg;base64...
      console.log(reader.result);
      document.querySelector("#img").src=reader.result;
  }


    }
</script>
</body>
</html>

这里是巧妙利用onchange触发改变事件,当前元素有改变时候触发。

reader.readAsDataURL(file[0]);是将得到的值转为dom操作对象。
上一篇:javascript – 使用正确的文件名而不是src =“blob …”将文件对象转换为图像


下一篇:使用FileReader在浏览器读取预览文件(image和txt)