js图片前端预览之 filereader 和 window.URL.createObjectURL

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

//preview img ： filereader方式
document.getElementById('imgFile').onchange = function(e){ 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); }
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实现前端预览，很简单，见前面的第一段代码，在自己手机上测试，没问题。但在某些奇葩手机上，比如oppo 安卓4.3在我们app的webview内通过打开相册上传发现无法预览图片！但在该手机的微信，浏览器内上传均可以！

看了下代码，如下图，是因为base64编码内缺少了图片格式，手动加上image/jpg图片立即显示，刚开始以为是readAsDataURL的问题，没有编码成功，找了一晚上原因，无解！不知哪根筋搭错突然想到打印出input file的type看看，发现type为空，而file的其他属性均正常。