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

相关文章

  • 基于JavaScript获取鼠标位置的各种方法

    基于JavaScript获取鼠标位置的各种方法

    这篇文章主要介绍了基于JavaScript获取鼠标位置的各种方法 ,需要的朋友可以参考下
    2015-12-12
  • js 判断浏览器使用的语言示例代码

    js 判断浏览器使用的语言示例代码

    这篇文章主要介绍了使用js 判断浏览器使用的语言,需要的朋友可以参考下
    2014-03-03
  • JavaScript统计网站访问次数的实现代码

    JavaScript统计网站访问次数的实现代码

    每一个称职的网管,都需要知道每天网站的访问量,需要实现网站访问次数功能来满足需求,本篇文章主要介绍了JavaScript统计网站访问次数的实现代码,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • js实现图片缓慢放大缩小效果

    js实现图片缓慢放大缩小效果

    这篇文章主要为大家详细介绍了js实现图片缓慢放大缩小效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • three.js镜头追踪的移动效果实例

    three.js镜头追踪的移动效果实例

    这篇文章主要为大家介绍了three.js镜头追踪的移动效果实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • js实现日历与定时器

    js实现日历与定时器

    本文主要介绍了js实现日历与定时器的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript建立一个语法高亮输入框实现思路

    JavaScript建立一个语法高亮输入框实现思路

    通常网站自带的textarea编辑器不能满足我们的需求比如高亮显示代码等,在这篇文章中,我将使用JavaScript库ACE来创建一个输入框效果,该脚本允许开发人员创建支持语法高亮的输入框,感兴趣的你可不要错过了哈
    2013-02-02
  • JavaScript如何获取和解析页面内容

    JavaScript如何获取和解析页面内容

    这篇文章主要为大家详细介绍了如何利用JavaScript实现获取和解析页面内容,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2025-03-03
  • uni-app实现热更新的详细操作步骤

    uni-app实现热更新的详细操作步骤

    随着 App 成功上架,可能更新频率往往会越来越高,传统的应用更新方式要求用户重新下载并安装应用,这不仅耗费用户大量时间、流量,还严重影响用户体验,为了提升用户体验,热更新技术应运而生,所以本文介绍了uni-app实现热更新的详细操作步骤,需要的朋友可以参考下
    2025-04-04
  • 简单的前端js+ajax 购物车框架(入门篇)

    简单的前端js+ajax 购物车框架(入门篇)

    其实,一直想把自己写的一些js给总结下,也许是能力有限不能把它完美结合起来。只能自己默默的看着哪些代码,无能为力
    2011-10-10

最新评论