淺談js圖片前端預覽之filereader和window.URL.createObjectURL

更新時間：2016年06月30日 09:05:38 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談js圖片前端預覽之filereader和window.URL.createObjectURL。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

淺談js圖片前端預覽之filereader和window.URL.createObjectURL

//preview img ： filereader方式
  document.getElementById('imgFile').onchange = function(e){ 5     var ele = document.getElementById('imgFile').files[0];

    var fr = new FileReader();
    fr.onload = function(ele){

      var pvImg = new Image();
      pvImg.src = ele.target.result;
      pvImg.setAttribute('id','previewImg');

      $('.preview_wrap').html('').append(pvImg);18     }
    fr.readAsDataURL(ele);
  }

//preview img ： URL.createObjectURL 方式
  document.getElementById('imgFile').onchange = function(e){
    var ele = document.getElementById('imgFile').files[0];

    var createObjectURL = function(blob){
     return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
    };
    var newimgdata = createObjectURL(ele);

    var pvImg = new Image();
    pvImg.src = newimgdata;
    pvImg.setAttribute('id','previewImg');

    $('.preview_wrap').html('').append(pvImg);
  }

以上先貼出用filereader 和 URL.createObjectURL 兩種預覽方式。

按照前輩們的說法，creatObjectURL可以有更好的性能，或許是瀏覽器自帶接口的原因, 可以處理的更快。

最近做了一個需要上傳圖片預覽的項目，用的最簡單的input file上傳，最開始想到的就是用filereader實現(xiàn)前端預覽，很簡單，見前面的第一段代碼，在自己手機上測試，沒問題。但在某些奇葩手機上，比如oppo 安卓4.3在我們app的webview內(nèi)通過打開相冊上傳發(fā)現(xiàn)無法預覽圖片！但在該手機的微信，瀏覽器內(nèi)上傳均可以！

看了下代碼，如下圖，是因為base64編碼內(nèi)缺少了圖片格式，手動加上image/jpg圖片立即顯示，剛開始以為是readAsDataURL的問題，沒有編碼成功，找了一晚上原因，無解！不知哪根筋搭錯突然想到打印出input file的type看看，發(fā)現(xiàn)type為空，而file的其他屬性均正常。