浅谈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就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。,也希望大家多多支持武林网。