浅谈 JS 图片前端预览之 FileReader 和 Window.url.CreateObjectUrl
// Vista previa IMG: FileReader 方式 document.getElementById ('imgfile'). onChange = function (e) {5 var ele = document.getElementById ('imgfile'). archivos [0]; var fr = new FileReader (); p. pvimg.src = ele.target.result; pvimg.setAttribute ('id', 'previsual ViewImg'); $ ('. Preview_Wrap'). Html (''). Append (PVIMG); 18} FR.ReadasDataurl (ELE); } // Vista previa img: url.createObjectUrl 方式 document.getElementById ('imgfile'). onChange = function (e) {var ele = document.getElementById ('imgfile'). archivos [0]; var createObjectUrl = function (blob) {Ventana de retorno [Window.webkiturl? 'webkiturl': 'url'] ['createObjectUrl'] (blob); }; var newimgData = createObjectUrl (ELE); var pvimg = nueva imagen (); pvimg.src = newimgData; pvimg.setAttribute ('id', 'previsual ViewImg'); $ ('. }以上先贴出用 FileReader 和 URL.CreateObjectUrl 两种预览方式。
按照前辈们的说法 , createObjectUrl 可以有更好的性能 , 或许是浏览器自带接口的原因 可以处理的更快。
最近做了一个需要上传图片预览的项目 , 用的最简单的 Archivo de entrada 上传 , 最开始想到的就是用 FileReader 实现前端预览 , 很简单 , 见前面的第一段代码 , , 没问题。但在某些奇葩手机上 没问题。但在某些奇葩手机上 比如 Oppo 安卓 4.3 在我们 Aplicación 的 WebView 内通过打开相册上传发现无法预览图片!但在该手机的微信 浏览器内上传均可以! 浏览器内上传均可以!
看了下代码 , 如下图 , 是因为 Base64 编码内缺少了图片格式 , 手动加上 手动加上 手动加上 Image/jpg 图片立即显示 , 刚开始以为是 ReadAsdataurl 的问题 , 没有编码成功 , , 无解!不知哪根筋搭错突然想到打印出 无解!不知哪根筋搭错突然想到打印出 无解!不知哪根筋搭错突然想到打印出 的 的 看看 发现 发现 为空 而 而 而 而 的其他属性均正常。 的其他属性均正常。
继续百度( Google 最近公司 FQ 不稳定 , 没法用) 结果看到有人遇到类似奇怪问题 但是没有解决。 但是没有解决。
无意间却发现图片预览除了 FileReader 还可以用 URL.CreateObjectUrl 。晚上 11 点 26 , 先赶最后一班地铁。
=====================
第二天一早 , 把半夜的灵感实验了下 根据判断 根据判断 根据判断 Archivo de entrada 的图片类型 , , 有点乱)
结果发现 Archivo 的 Tipo 并不是你直接赋值就可以改变的 没有用! 没有用!
于是开始实践 URL.CreateObjectUrl (见最上面的第二部分代码)
神奇!发现预览正常!
查看代码发现 , createObjectUrl 得到的是一个 http 格式的文件 , 即使 Archivo de entrada 的文件类型不存在也不会编码失败。
以上这篇浅谈 JS 图片前端预览之 FileReader 和 Window.url.CreateObjectUrl 就是小编分享给大家的全部内容了 , 希望能给大家一个参考 , 也希望大家多多支持武林网。