javascript预览上传图片发现的问题的解决方法
更新时间:2010年11月25日 19:59:32 作者:
前段时间做一个行业站点,其中商铺有一块功能是商铺设置功能,要求是进行版式,企业名称,企业头部LOGO,企业头部背景进行自定义设置。
先看看效果图吧:
机会难得,有点技术亮点,就一下子投入到功能开发中去了。在这一块的功能开发中,自己还是学到些不错的东西,其中一点就是,用户选择上传的图片,如何预览出来呢。网上找了些资料,最终采用如下方法:
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都正常显示
机会难得,有点技术亮点,就一下子投入到功能开发中去了。在这一块的功能开发中,自己还是学到些不错的东西,其中一点就是,用户选择上传的图片,如何预览出来呢。网上找了些资料,最终采用如下方法:
复制代码 代码如下:
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都正常显示
相关文章
jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox...2007-03-03非常不错的 子鼠 滑动图片效果 Javascript+CSS
一个效果如果没有一个合理的布局,是很难作出来的,所以布局是非常重要的基础! 下边的效果,是试着假设在布局我无法改的情况下,能过外边的CSS或Javascript来实现一个滑动图片效果!2009-04-04javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
一般页面的的图片为了布局考虑,显示大小都小于实际大小。 鼠标在图片上移动时,在旁边展示一个跟此图片显示大小一样的层。并讲鼠标附近区域对应的原始图片的区域按原始大小显示在这个层中。2009-04-04JavaScript判断图片是否能够加载,失败则替换默认图片
JavaScript智能判断图片是否能够正确加载,若加载失败则用默认图片替换,这是个比较实用的功能,不少网站都可见到这种功能.2010-10-10
最新评论