快捷導(dǎo)航

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

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

下面小編就為大家?guī)?lái)一篇淺談js圖片前端預(yù)覽之filereader和window.URL.createObjectURL。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

淺談js圖片前端預(yù)覽之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 兩種預(yù)覽方式。

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

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

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