前端图片预览方式

图片预览方法

图片预览现在大多数基于HTML5提供的接口FileReader，而FileReader给我们提供了四个方法
1.readAsArrayBuffer： result属性中二进制数据缓冲区
2.readAsBinaryString： result属性中包含文件原始二进制数据
3.readAsDataURL： result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.
4.readAsText： result属性中将包含一个字符串以表示所读取的文件内容.

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

//html
<label>请选择一个图像文件：</label> 
<input type="file" id="file_input" /> 

//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]);
     }