图片预览方法

图片预览现在大多数基于HTML5提供的接口FileReader，而FileReader给我们提供了四个方法

一：其中要实现图片预览需要用readAsDataURL这个方法会将图片转换成base64的模式。之后我们把base64的字符串赋值给img的src属性，就可以实现图片预览代码如下

//html请选择一个图像文件： 

//js var input = document.querySelector('#file_input');    input.onchange = function(){        readfile(input.files[0], (e)=>{           var src = e.target.result;           var img = new Image();                img.src = src;                document.body.appendChild(img);            })         }         //将图片转换成base64形式         function readfile(blob, callback){            var reader = new FileReader();            reader.onload = callback;            reader.readAsDataURL(blob);         }

二： 我么还可以使用对象URL中的方法createObjectURL()来实现图片预览，代码如下

var input = document.querySelector('#file_input');    input.onchange = function(){        var img = new Image();        img.src = window.URL.createObjectURL(input.files[0]);        document.body.appendChild(img);    }

三： 我们还可以通过拖拽的方式来实现图片预览，代码如下

//必须要禁止浏览器默认行为      drop.ondragenter = function(e){          e.preventDefault();      }      drop.ondragover = function(e){          e.preventDefault();      }      drop.onleave = function(e){          e.preventDefault();      }      drop.ondrop = function(e){          e.preventDefault();          //获取文件对象数组          var fs = e.dataTransfer.files;          var reader = new FileReader();          reader.onload = function(e){              var img = new Image();              img.src = e.target.result;              //图片宽度和高度设置成拖拽狂框一样              img.width = drop.clientWidth;              img.height = drop.clientHeight;              drop.appendChild(img);          }          reader.readAsDataURL(fs[0]);     }