作家
登录

js 上传图片预览问题

作者: 来源:www.28hudong.com 2013-03-30 01:07:28 阅读 我要评论

最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现IE8和火狐不能显示,弄了很久,早上终于解决了很高兴。故跟大家分享下,我也多是网上找的,自己总结的一下,希望对大家有点帮助。   我们一般根据IE6、IE7进行开发的时候写图片预览的代码是: 复制代码 代码如下: document.getElementById("img").src = document.getElementById("file").value;   还有一种方式 复制代码 代码如下: <div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale); width:300px; height:300px;" id="div1"></div> <script type="javascript"> document.getElementById("div1").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("file").value; </script> IE8   在IE8和火狐上直接用户控件.value得到的只是文件名称而不是完整路径 复制代码 代码如下: var isIE = (document.all) ? true : false; var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1); var isIE8 = isIE && (navigator.userAgent.indexOf('MSIE 8.0') != -1); var file = document.getElementById("file"); if (isIE7 || isIE8) { file.select(); img = document.selection.createRange().text; document.selection.empty(); document.getElementById("img").src = img; } 火狐   在火狐上问题很多,在网上找了很多东西都无法实现,首先要获得 在火狐上问题很多,在网上找了很多东西都无法实现。   1。首先要获得上传问题的完整路径,用下面的方法是可以得完整路径 复制代码 代码如下:   if (navigator.userAgent.indexOf("Firefox") != -1) {   try {netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch (e) { } img = document.getElementById("file").value;   }   2。但直接这样给图片修改路径(src)没有反应,后来发现有人说要在火狐显示本地图片要在前面加"file:///" 复制代码 代码如下:       if (!document.all) { img = img.replace(/\/g, "/"); img = "file:///" + img }   这样如果是页面上放个图片是可以显示,不过前提条件是不能放在IIS上,我的网站是部署在IIS上的这样就算我直接放个图片地址是本地图片也显示不了,所有我有本郁闷到了,而且很多人都说火狐有安全设置不能预览本地图片,我差点就放弃了。   最后在网上在到一个可以预览的例子,仔细分析发现原来要在火狐上实现预览图片其实代码也很简单: 复制代码 代码如下:   document.getElementById("img").src = document.getElementById("file").files[0].getAsDataURL();   我把它的路径弹出了看,发现是一串很长的东西,好像是制定的图片类型等等,不过总算是解决了

  推荐阅读

  DIY jquery plugin - tabs标签切换实现代码

Why DIY jquery tab 接触jquery 2,3个月了,一直都未动手写过插件。正好最近比较闲,就打算把一直看不顺眼的项目中现有的tab改造一番(现有的tab未能做成一个控件,copy,past的代码太多)。 想着jQuery这么强大的库>>>详细阅读


本文标题:js 上传图片预览问题

地址:http://www.17bianji.com/kaifa2/JS/25249.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)