浅谈 js 图片前端预览之 filereader 和 window.url.createobjecturl
// 미리보기 IMG ： FilereAder 方式 hocument.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 ( ''). Append (pvimg); 18} fr.readasdataurl (ele); } // 미리보기 IMG ： url.createObjectUrl 方式 docum var createobjecturl = function (blob) {return swooind [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 er url.createobjecturl 两种预览方式。
按照前辈们的说法, creatobjecturl 可以有更好的性能, 或许是浏览器自带接口的原因, 可以处理的更快。
最近做了一个需要上传图片预览的项目 最近做了一个需要上传图片预览的项目, 用的最简单的 입력 파일 上传 上传, 最开始想到的就是用 filereader 实现前端预览, 很简单 很简单, 见前面的第一段代码, 在自己手机上测试 在自己手机上测试, 没问题。但在某些奇葩手机上 没问题。但在某些奇葩手机上, 比如 oppo 安卓 4.3 在我们 앱 的 webview 内通过打开相册上传发现无法预览图片！但在该手机的微信 内通过打开相册上传发现无法预览图片！但在该手机的微信, 浏览器内上传均可以！
看了下代码, 如下图, 如下图 如下图 如下图 是因为 base64 编码内缺少了图片格式 编码内缺少了图片格式, 手动加上 image/jpg 图片立即显示, 刚开始以为是 readasdataurl 的问题, 没有编码成功 找了一晚上原因, 无解！不知哪根筋搭错突然想到打印出 无解！不知哪根筋搭错突然想到打印出 입력 파일 的 type 看看 看看, 发现 유형 为空 为空 的其他属性均正常。 的其他属性均正常。 的其他属性均正常。
继续百度 最近公司 + (Google google fq 不稳定 不稳定, 没法用), 结果看到有人遇到类似奇怪问题, 但是没有解决。 但是没有解决。
无意间却发现图片预览除了 Filereader er url.createobjecturl 。晚上 11 点 26, 先赶最后一班地铁。
======================
짐
结果发现 파일 并不是你直接赋值就可以改变的 유형 的 的, 没有用！
于是开始实践 url.CreateObjectUrl (见最上面的第二部分代码)
神奇！发现预览正常！
查看代码发现, CreateObjectUrl 得到的是一个 http 格式的文件, 即使 입력 파일 的文件类型不存在也不会编码失败。
以上这篇浅谈 js 图片前端预览之 filereader 和 window.url.createobjecturl 就是小编分享给大家的全部内容了, 希望能给大家一个参考, 也希望大家多多支持武林网。 也希望大家多多支持武林网。