您的位置：首页 > 其它

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

2018-03-02 16:07 656 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航