浅谈js fileReader和window.url.createobjecturl
// preview img：fileReader方式document.getElementById（'imgfile'）。onChange = function（e）{5 var ele = document.getElementById（'imgfile'）。文件[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（''）。附录（pvimg）; 18} fr.ReadAsdataurl（ele）; } //预览img：url.createobjectUrl document.getElementById（'imgfile'）。onChange = function（e）{var ele = document.getElementById（'imgfile'）。文件[0]; var createObjectUrl = function（blob）{返回窗口[window.webkiturl？ 'webkiturl'：'url'] ['createObjectUrl']（blob）; }; var newimgdata = createObjectUrl（ele）; var pvimg = new Image（）; pvimg.src = newimgdata; pvimg.setAttribute（'id'，'previewimg'）; $（'。preview_wrap'）.html（''）。附录（pvimg）; }以上先贴出用fileReader和url.createobjecturl两种预览方式。
按照前辈们的说法，CreatoBjecturl可以有更好的性能，或许是浏览器自带接口的原因，可以处理的更快。，可以处理的更快。
最近做了一个需要上传图片预览的项目，用的最简单的输入文件上传，最开始想到的就是用fileReader实现前端预览，很简单，见前面的第一段代码，在自己手机上测试，没问题。但在某些奇葩手机上
看了下代码，如下图，是因为base64编码内缺少了图片格式，图image/jpg图片立即显示，刚开始以为是
继续百度（Google最近公司fq不稳定，没法用），结果看到有人遇到类似奇怪问题，但是没有解决。，但是没有解决。
无意间却发现图片预览除了fileReader还可以用url.createobjecturl。晚上11点26，先赶最后一班地铁。
====================
第二天一早，把半夜的灵感实验了下，根据判断输入文件的图片类型，如果不存在就给文件手动赋值类型。（见下方调试用代码，有点乱）
结果发现文件的类型并不是你直接赋值就可以改变的，没有用！，没有用！
于是开始实践url.createobjecturl（见最上面的第二部分代码）
神奇！发现预览正常！
查看代码发现，createObjecturl得到的是一个http格式的文件，即使输入文件的文件类型不存在也不会编码失败。
以上这篇浅谈js图片前端预览之fileReader和window.url.createobjecturl就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。，也希望大家多多支持武林网。