利用FileReader实现客户端预览图片

最新推荐文章于 2024-06-20 09:38:04 发布

greystar

最新推荐文章于 2024-06-20 09:38:04 发布

阅读量793

点赞数 2

分类专栏： JS

本文链接：https://blog.csdn.net/greystar/article/details/79424440

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

我们知道，img的src属性或background的url属性，可以通过被赋值为图片网络地址或base64的方式显示图片。
在文件上传中，我们一般会先将本地文件上传到服务器，上传成功后，由后台返回图片的网络地址再在前端显示。
通过FileReader的readAsDataURL方法，我们可以不经过后台，直接将本地图片显示在页面上。这样做可以减少前后端频繁的交互过程，减少服务器端无用的图片资源，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Document </title>
</head>
<body>

<form action="">
   <input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)">
   <img alt="暂无图片" id="myImg" src="" height="100px" width="100px">
</form>

<script>
    function changImg(e){
      var myImg = document.getElementById('myImg');
      for (var i = 0; i < e.target.files.length; i++) {
        var file = e.target.files[i];
        console.log(file);
        if (!(/^image\/.*$/i.test(file.type))) {
            continue; //不是图片就跳出这一次循环
        }
        //实例化FileReader API
        var freader = new FileReader();
        freader.readAsDataURL(file);
        freader.onload = function(e) {
          console.log(e);
          myImg.setAttribute('src', e.target.result);
        }
      }
    }
</script>

</body>
</html>