浅谈 js 图片前端预览之 filereader 和 window.url.createObjecturl
// ดูตัวอย่าง img： filereader 方式 document.getElementById ('imgfile'). onChange = ฟังก์ชั่น (e) {5 var ele = document.getElementById ('imgfile') ไฟล์ [0]; var fr = new filereader (); fr.onload = function (ele) {var pvimg = 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 = ฟังก์ชั่น (e) {var ele = document.getElementById ('imgfile') ไฟล์ [0]; var createObjecturl = function (blob) {return window [window.webkiturl? 'webkiturl': 'url'] ['createobjecturl'] (blob); - var newimgdata = createObjecturl (ele); var pvimg = ภาพใหม่ (); pvimg.src = newimgdata; pvimg.setAttribute ('id', 'previewimg'); $ ('. preview_wrap'). html (''). ภาคผนวก (pvimg); -以上先贴出用 filereader 和 url.createObjecturl 两种预览方式。
按照前辈们的说法， creatoBjecturl 可以有更好的性能， 或许是浏览器自带接口的原因, 可以处理的更快。
最近做了一个需要上传图片预览的项目， 用的最简单的ไฟล์อินพุต上传， 最开始想到的就是用 filereader 实现前端预览， 很简单， 见前面的第一段代码在自己手机上测试， 没问题。但在某些奇葩手机上， 比如比如比如比如比如比如比如安卓安卓 4.3 在我们แอพ的 webview 内通过打开相册上传发现无法预览图片！但在该手机的微信， 浏览器内上传均可以！ 浏览器内上传均可以！ 浏览器内上传均可以！ 浏览器内上传均可以！ 浏览器内上传均可以！ 浏览器内上传均可以！，，，，
看了下代码， 如下图， 是因为 base64 编码内缺少了图片格式， 手动加上 image/jpg 图片立即显示， 刚开始以为是 readasdataurl 的问题，，， 找了一晚上原因，， 无解！不知哪根筋搭错突然想到打印出 ไฟล์อินพุต的 type 看看发现发现发现为空， 而ไฟล์的其他属性均正常。
继续百度（ Google 最近公司 FQ 不稳定， 没法用），， 结果看到有人遇到类似奇怪问题， 但是没有解决。但是没有解决。
无意间却发现图片预览除了 filereader 还可以用 url.createObjecturl 。晚上 11 点 26， 先赶最后一班地铁。
-
第二天一早， 把半夜的灵感实验了下， 根据判断ไฟล์อินพุต的图片类型， 如果不存在就给文件手动赋值类型。（见下方调试用代码， 有点乱））
结果发现ไฟล์的พิมพ์并不是你直接赋值就可以改变的， 没有用！
于是开始实践 url.createObjecturl (见最上面的第二部分代码)
神奇！发现预览正常！
查看代码发现， createObjecturl 得到的是一个 http 格式的文件， 即使ไฟล์อินพุต的文件类型不存在也不会编码失败。
以上这篇浅谈 js 图片前端预览之 filereader 和 window.url.createObjecturl 就是小编分享给大家的全部内容了， 希望能给大家一个参考， 也希望大家多多支持武林网。也希望大家多多支持武林网。