前端圖片預覽方式

圖片預覽方法

圖片預覽如今大多數基於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]);
     }