javascript上传图片前预览图片兼容大多数浏览器

 更新时间:2013年10月25日 17:04:02   作者:  
上传图片前预览图片这种效果应用比较广泛,实现的方也大同小异,下面为大家介绍下,在javascript中是如何实现的,感兴趣的朋友可以参考下
复制代码 代码如下:

<div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div>
<asp:FileUpload ID="file_head" runat="server" onchange="javascript:setImagePreview();" />

复制代码 代码如下:

<script type="text/javascript">
function setImagePreview() {
var docObj = document.getElementById("ctl00_ContentMain_file_head");
var fileName = docObj.value;
if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {
alert('您上传的图片格式不正确,请重新选择!');
return false;
}

var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '63px';
imgObjPreview.style.height = '63px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {
imgObjPreview.src = window.webkitURL.createObjectURL(docObj.files[0]);
}
else {
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
} else {
//IE下,使用滤镜
docObj.select();
docObj.blur();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "63px";
localImagId.style.height = "63px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}

</script>

此js解决360浏览器显示图片问题。因为360浏览器6.2用的是Chrome的内核,而
复制代码 代码如下:

window.URL.createObjectURL(docObj.files[0]);

只有在火狐下才认得到,chrome中不认识window.URL.createObjectURL,所有用Safari的window.webkitURL.createObjectURL

相关文章

  • IE的有条件注释判定IE版本详解(附实例代码)

    IE的有条件注释判定IE版本详解(附实例代码)

    IE的有条件注释是一种专有的(因此是非标准的)、对常规(X)HTML注释的Miscrosoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块(不一定就是css,也可以是html代码,甚至是JavaScript代码)。
    2012-01-01
  • js实现照片墙功能实例

    js实现照片墙功能实例

    这篇文章主要介绍了js实现照片墙功能的方法,以一个完整实例形式分析了js实现照片墙的css与js的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript使用箭头函数实现优化代码

    JavaScript使用箭头函数实现优化代码

    在JavaScript的编程世界里,我们时常被普通函数的冗长写法所困扰,每次都需要写function关键字,有时候还要明确地写return语句,下面我们就来看看如何利用箭头函数优化这些繁琐的代码吧
    2023-11-11
  • JS获取鼠标坐标、获取鼠标像素点示例

    JS获取鼠标坐标、获取鼠标像素点示例

    运行代码之后随意移动鼠标的位置,可适时显现鼠标的坐标点,不占用系统资源
    2014-03-03
  • 使用Auto.js 调用系统短信、电话模块实现功能

    使用Auto.js 调用系统短信、电话模块实现功能

    这篇文章主要介绍了如何使用Auto.js调用系统短信与电话模块,并实现读取短信与联系人的功能,并给出了实现相应功能的代码
    2023-03-03
  • JavaScript鼠标拖拽事件详解

    JavaScript鼠标拖拽事件详解

    这篇文章主要为大家详细介绍了JavaScript鼠标拖拽事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • JS使用正则截取两个字符串之间的字符串实现方法详解

    JS使用正则截取两个字符串之间的字符串实现方法详解

    这篇文章主要介绍了JS使用正则截取两个字符串之间的字符串实现方法,结合实例形式简单分析了JS正则匹配与截取操作的实现技巧,并拓展分析了数量词的概念与功能,需要的朋友可以参考下
    2017-01-01
  • js混淆加密之jsjiami.v6分析

    js混淆加密之jsjiami.v6分析

    这篇文章主要为大家介绍了js混淆加密之jsjiami.v6分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • JS实现仿苹果底部任务栏菜单效果代码

    JS实现仿苹果底部任务栏菜单效果代码

    这篇文章主要介绍了JS实现仿苹果底部任务栏菜单效果代码,可实现鼠标滑过显示大图标功能,涉及javascript鼠标事件及页面元素遍历并修改属性的技巧,需要的朋友可以参考下
    2015-08-08
  • javascript自动改变文字大小和颜色的效果的小例子

    javascript自动改变文字大小和颜色的效果的小例子

    这篇文章介绍了javascript自动改变文字大小和颜色的效果的小例子,有需要的朋友可以参考一下
    2013-08-08

最新评论