实现图片实时预览的两种方法(有兼容性问题，最好通过后台)

一 ，通过FileReader对象

<body>
    <input type="file" id="file" >
    <div id="box"></div>
    <script>
        var file = document.getElementById("file");
        var box = document.getElementById("box");

        file.addEventListener("change", function () {
            console.dir(file);

            //files:里面存储了所有上传的文件
            //这个data就是我们上传的那个文件
            var data = file.files[0];

            //1. 创建一个文件读取器
            var fr = new FileReader();

            //2. 让文件读取器读取整个文件
            fr.readAsDataURL(data);

            //3. 等待文件读取完
            //onload：文件读取完成后，就会触发
            fr.onload = function () {
                var img = document.createElement("img");
                //当文件读取完成，可以通过result属性获取结果
                img.src = fr.result;
                box.innerHTML = "";
                box.appendChild(img);
            }
        });
    </script>
</body>

二，通过URL.createObjectURL

<body>

  <input type="file">
  <img src="" alt="">

  <script>
    var fileInp = document.querySelector("input");
    var img = document.querySelector("img");

    // 监听文件选中
    fileInp.onchange = function() {
      // 获取文件对象 (图片)
      var file = fileInp.files[0];
      // URL.createObjectURL(文件对象) 可以创建一个路径, 指向指定的文件对象
      // 返回值: 就是文件路径
      var imgUrl = URL.createObjectURL( file );
      // 设置给 img
      img.src = imgUrl;
    }
  </script>
</body>

 

posted @ 2020-03-13 21:34  handsomehe  阅读(663)  评论(0)    收藏  举报