前端圖片預(yù)覽方式

lily_wang 發(fā)布于2019-08-21 11:53 / 617人閱讀

摘要：圖片預(yù)覽方法圖片預(yù)覽現(xiàn)在大多數(shù)基于提供的接口，而給我們提供了四個方法屬性中二進制數(shù)據(jù)緩沖區(qū)屬性中包含文件原始二進制數(shù)據(jù)屬性中將包含一個格式的字符串以表示所讀取文件的內(nèi)容屬性中將包含一個字符串以表示所讀取的文件內(nèi)容一其中要實現(xiàn)圖片預(yù)覽需要用這

圖片預(yù)覽方法

圖片預(yù)覽現(xiàn)在大多數(shù)基于HTML5提供的接口FileReader，而FileReader給我們提供了四個方法
1.readAsArrayBuffer： result屬性中二進制數(shù)據(jù)緩沖區(qū)
2.readAsBinaryString： result屬性中包含文件原始二進制數(shù)據(jù)
3.readAsDataURL： result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內(nèi)容.
4.readAsText： result屬性中將包含一個字符串以表示所讀取的文件內(nèi)容.

一：其中要實現(xiàn)圖片預(yù)覽需要用readAsDataURL這個方法會將圖片轉(zhuǎn)換成base64的模式。之后我們把base64的字符串賦值給img的src屬性，就可以實現(xiàn)圖片預(yù)覽代碼如下

//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);
            })
         }
         //將圖片轉(zhuǎn)換成base64形式
         function readfile(blob, callback){
            var reader = new FileReader();
            reader.onload = callback;
            reader.readAsDataURL(blob);
         }

二：我么還可以使用對象URL中的方法createObjectURL()來實現(xiàn)圖片預(yù)覽，代碼如下

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

三：我們還可以通過拖拽的方式來實現(xiàn)圖片預(yù)覽，代碼如下

      //必須要禁止瀏覽器默認行為
      drop.ondragenter = function(e){
          e.preventDefault();
      }
      drop.ondragover = function(e){
          e.preventDefault();
      }
      drop.onleave = function(e){
          e.preventDefault();
      }
      drop.ondrop = function(e){
          e.preventDefault();
          //獲取文件對象數(shù)組
          var fs = e.dataTransfer.files;
          var reader = new FileReader();
          reader.onload = function(e){
              var img = new Image();
              img.src = e.target.result;
              //圖片寬度和高度設(shè)置成拖拽狂框一樣
              img.width = drop.clientWidth;
              img.height = drop.clientHeight;
              drop.appendChild(img);
          }
          reader.readAsDataURL(fs[0]);
     }