javascript预览上传图片发现的问题的解决方法

先看看效果图吧：

机会难得，有点技术亮点，就一下子投入到功能开发中去了。在这一块的功能开发中，自己还是学到些不错的东西，其中一点就是，用户选择上传的图片，如何预览出来呢。网上找了些资料，最终采用如下方法：


代码如下:

function (obj) { //logo上传添加事件
var logoimg = null;
if (document.all) {//如果是IE情况下
obj.select();
logoimg = document.selection.createRange().text;
//由于是采用滤镜的方式，所以要把图片设置为不可见，在图片外层的DIV上面设置滤镜效果
$(".setup_logo_left img").removeAttr("src");
$(".setup_logo_left img").css("display", "none");
var img = document.getElementById("preview_fake");
img.filters.item(
'DXImageTransform.Microsoft.AlphaImageLoader').src = logoimg;
return;
}
logoimg = obj.files[0].getAsDataURL();
$(".setup_logo_left img").attr("src", logoimg);
}

效果很不错，在IE6，IE7，IE8,FOX,哦还有一个特让人纠结的360都正常显示

赞 (0)

相关推荐

  • javascript firefox不显示本地预览图片问题的解决方法

    复制代码 代码如下: <img id="img1" src=""/> <script> function fileChange(obj) { var url = obj.value url = "file:///" + url.replace("\\",'/'); alert(url); document.getElementById("img1").src= url; } <

  • javascript修改图片src的方法

    本文实例讲述了javascript修改图片src的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>使用js改变图片</title> <script> function changeImage() { var element = document.getElementById('myimage'); element.src = "i

  • JavaScript实现文字与图片拖拽效果的方法

    本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JavaScript实现文字与图片的拖拽效果</title> <style type="text/css"> *{padding:0;margin:0;} .tips{position:absolute;background:#eee;} </style

  • javascript动态改变img的src属性图片不显示的解决方法

    首先讲下这个bug的出现的情况,页面中有 复制代码 代码如下: <a href="javascript:void(0)" onclick="document.getElementById('current').src='images/001.jpg';"> 这么一个a标签,onclick中的JS代码就是改变id为current的img标签的src属性,以达到动态切换图片的效果.可是不幸的是:IE是动态改变的图片的路径,但是图片却不显示出来,得右键&quo

  • javascript实现图片循环渐显播放的方法

    本文实例讲述了javascript实现图片循环渐显播放的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>图片的循环渐显播放效果代码</title> <head> <!--1.将下面的代码插入到HEML的<head></head>之间: --> <script language=javaScript> <!--// sandra0 = new Image()

  • javascript 控制图片播放代码

    javascript 控制图片播放代码

    无标题文档 .photo {width:896px;height:280px;border-top:0;border-right:2px solid #9f9fa1;border-bottom:1px solid #9f9fa1;border-left:2px solid #9f9fa1;font-size:12px} .photo .left {width:310px;height:222px;margin:0 5px} .photo .left img {width:310px;height

  • 原生javaScript实现图片延时加载的方法

    本文实例讲述了原生javaScript实现图片延时加载的方法.图片延时加载其实是有jquery插件了并且加载方法非常的简单并且合理了,但有朋友觉得加载jquery插件包太大了,于时自己写了一个,给各位分享一下. 首先,图片延时加载可以节省我们带宽,获取到更好的用户体验,尤其对于图片多的站点,这一点显得至关重要,下面就跟大家探讨一下图片延时加载原理和实现代码. 图片延时加载原理 图片延时加载原理是在html里面的图片src填的并不是真正的图片地址,而是以一种自定义属性把图片地址赋给img标签,如:

  • javascript感应鼠标图片透明度显示的方法

    本文实例讲述了javascript感应鼠标图片透明度显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>感应鼠标的图片透明度显示效果</title> <head> <script language="JavaScript1.2"> function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=

  • javascript预加载图片、css、js的方法示例介绍

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提升用户体验.在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户.不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果. 先说需要知道的服务器返回的status code:status-code: 200 - 客户端请求成功status-code: 304 -

  • javascript预览上传图片发现的问题的解决方法

    javascript预览上传图片发现的问题的解决方法

    先看看效果图吧: 机会难得,有点技术亮点,就一下子投入到功能开发中去了.在这一块的功能开发中,自己还是学到些不错的东西,其中一点就是,用户选择上传的图片,如何预览出来呢.网上找了些资料,最终采用如下方法: 复制代码 代码如下: function (obj) { //logo上传添加事件 var logoimg = null; if (document.all) {//如果是IE情况下 obj.select(); logoimg = document.selection.createRange()

  • Android编程中调用Camera时预览画面有旋转问题的解决方法

    本文实例讲述了Android编程中调用Camera时预览画面有旋转问题的解决方法.分享给大家供大家参考,具体如下: 在调用Camera写应用的时候,前后摄像头的情况有时候是不一样的.有时候,明明后摄像头没有问题,而调用到前摄像头时,却倒转了180°,或者其他角度,百思不得其解.在查看了Android源码之后,发现它的解决办法很是好,接下来贴个源码,以备日后查看. public static int getDisplayRotation(Activity activity) { int rotat

  • Javascript iframe交互并兼容各种浏览器的解决方法

    在Web前端开发中,我们经常会用到iframe这个控件. 但是这个控在内.外交互时,往往各个浏览器所用的关键字不同,很是麻烦,为了能够得到子iframe中的window对象,各家浏览器有着各家的指定,有的是window,有的是contentWindow等等也许还有我们不知道的. 但是从子页面访问父层页面,其本上大家都是window.parent就可以了. 那么通过这个特征,我们可以在子页面中,把自身的window对象传递给父页面就可以了,这样父页面就很轻松的访问子页面,再也不用靠虑如何从ifra

  • javascript在IE下trim函数无法使用的解决方法

    本文实例分析了javascript在IE下trim函数无法使用的解决方法,对于web前段设计有一定的借鉴价值.具体分析如下: 首先,javascript的trim函数在firefox下面使用没有问题: <script language="javascript"> var test1 = " aa "; test1 = test1.toString(); test1 = test1.trim(); </script> 在火狐下这样用没有问题,

  • JavaScript实现省市联动过程中bug的解决方法

    本文为大家分享了JavaScript实现省市联动过程中bug的解决方法,供大家参考,具体内容如下 先把实现省市联动遇到的问题描述一下 1.1.原来的思路 1.1.1.初始化加载省份 $.ajax({ 'type' : 'POST', 'dataType' : 'json', 'url' : '${rc.contextPath}/crm/merchantMgr/editMerchantBankAccount.htm?method=getBankProvinces', 'success' : fun

  • jQuery实现本地预览上传图片功能

    本文实例介绍了基于JQUERY扩展,图片上传预览插件,目前兼容浏览器(IE 谷歌 火狐) 不支持safari,分享给大家供大家参考,具体内容如下 HTML代码: <html> <head> <title>图片上传预览演示</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javas

  • 关于安装LNMP集成包后上传图片报500错误的解决方法

    关于安装LNMP集成包后上传图片报500错误的解决方法

    前言 lnmp 的全称是linux + nginx + mysql + php (国外喜欢简称为LEMP,搜英文资料需要搜LEMP),最近因为客户的网站需要部署到服务器上,根据目前流行的服务器,我选择了使用LNMP集成化的安装包,安装完成之后将代码部署到服务器之后,这时出现了一个问题,网站无法上传图片,并且出现了500的错误. 使用谷歌进行搜索发现大多数人遇到的问题和我遇到的都不一样,后来才知道是因为没有PHP中没有安装exif的扩展,下面就介绍一下如何安装该扩展.话不多说了,来一起看看详细的介

  • IE8的JavaScript点击事件(onclick)不兼容的解决方法

    博客园闪存分页是用JavaScript生成的,今天发现在IE8下点击页码不能翻页,翻页操作是在当前页码的onclick事件中进行的. 开始代码是这么写的: 复制代码 代码如下: var a = document.createElement("a");a.setAttribute("onclick", this.ClickFunctionName + "(" + pageIndex + ");Pager.SetCurrent("

  • IE6下出现JavaScript未结束的字符串常量错误的解决方法

    里面提到"DOM是UTF-8的篇码,如果JS库不是分离的独立JS文件,而是包含在DOM里的,这个问题是不会出现的.然而分离的JS文件并不是UTF-8编码,被加库到UTF-8编码的DOM里,中文就出现了乱码,并影响到引号符,使浏览器无法判断字符串结束.解决变法很简单,JS文件另存为UTF-8编码格式即可. " 所以我修改了JavaScript的引用, <script type="text/javascript" src="**.js" cha

  • 在页面预览客户端本地图片的js代码(兼容FF IE)

    公司最近有个项目有这样的需求我才发现我之前写的 如何通过JS获取用户本地图片路径 这篇文章里所使用的方法只支持本地页面预览本地图片 有一种解决方法是上传到服务器后返回相对路径 但是效率是个问题,编程复杂度也会提高 直接上demo代码 为更多有这种需求又苦于找不到解决方案的同行提供源码 转载请注明出处 我这里还有更多的其他问题的解决方案供更多人参考 get file input full path function getFullPath(obj) { var newPreview = docum

随机推荐