浅谈 js 图片前端预览之 filereader 和 window.url.createObjecturl
// pratinjau img : filereader 方式 document.geteLementById ('imgfile'). onchange = function (e) {5 var ele = document.geteLementById ('imgfile'). File [0]; var fr = filereader baru (); fr.onload = function (ele) {var pvimg = gambar baru (); pvimg.src = ele.target.Result; pvimg.setAttribute ('id', 'previewimg'); $ ('. Preview_wrap'). html (''). append (pvimg); 18} fr.readasDataurl (ele); } // Pratinjau img : url.createObjecUrl 方式 document.geteLementById ('imgfile'). onchange = function (e) {var ele = document.geteLementById ('imgfile'). File [0]; var createObjecTurl = function (blob) {return window [window.webkiturl? 'WebKiturl': 'url'] ['createObjecTurl'] (blob); }; var newiMgData = createObjecTurl (ELE); var pvimg = gambar baru (); pvimg.src = newiMgData; pvimg.setAttribute ('id', 'previewimg'); $ ('. Preview_wrap'). html (''). append (pvimg); }以上先贴出用 filereader 和 url.createObjecturl 两种预览方式。
按照前辈们的说法 , createTObjecturl 可以有更好的性能 , 或许是浏览器自带接口的原因, 可以处理的更快。
最近做了一个需要上传图片预览的项目 , 用的最简单的 file input 上传 , 最开始想到的就是用 filereader 实现前端预览 , 很简单 , 见前面的第一段代码 , 在自己手机上测试 , 没问题。但在某些奇葩手机上 , 比如 比如 安卓 安卓 在我们 在我们 在我们 的 , , , , , , , , , , , , , , , , , , , , ,
看了下代码 , 如下图 , 是因为 basis64 编码内缺少了图片格式 , 手动加上 手动加上 手动加上 手动加上 手动加上 手动加上 手动加上 手动加上 , , 刚开始以为是 刚开始以为是 readasdataurl 的问题 , 没有编码成功 , , , 无解!不知哪根筋搭错突然想到打印出 file input 的 Jenis 看看 , , type 为空 , , 而 而 而 而 , , , , , , , , , ,
继续百度( Google 最近公司 fq 不稳定 , 没法用) , 结果看到有人遇到类似奇怪问题 , 但是没有解决。
无意间却发现图片预览除了 filereader 还可以用 url.createObjecturl 。晚上 11 点 26 , 先赶最后一班地铁。
======================
第二天一早 , 把半夜的灵感实验了下 , 根据判断 file input 的图片类型 , 如果不存在就给文件手动赋值类型。(见下方调试用代码 , 有点乱)
结果发现 file 的 ketik 并不是你直接赋值就可以改变的 , 没有用!
于是开始实践 url.createObjecturl (见最上面的第二部分代码)
神奇!发现预览正常!
查看代码发现 , createObjecTurl 得到的是一个 http 格式的文件 , 即使 file input 的文件类型不存在也不会编码失败。
以上这篇浅谈 js 图片前端预览之 filereader 和 window.url.createObjecturl 就是小编分享给大家的全部内容了 , 希望能给大家一个参考 , 也希望大家多多支持武林网。