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


Posted in Javascript onOctober 25, 2013
<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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
JavaScript国旗变换效果代码
Aug 13 Javascript
JavaScript 常用函数
Dec 30 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
图片动画横条广告带上下滚动的JS代码
Oct 25 #Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 #Javascript
详细介绍8款超实用JavaScript框架
Oct 25 #Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 #Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 #Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 #Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 #Javascript
You might like
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
php输出图像的方法实例分析
2017/02/16 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
分享一个asp.net pager分页控件
2012/01/04 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
jQuery插件jsonview展示json数据
2018/05/26 jQuery
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
python使用PyGame模块播放声音的方法
2015/05/20 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
详解Python中的测试工具
2019/06/09 Python
python 实现return返回多个值
2019/11/19 Python
浅谈Python 参数与变量
2020/06/20 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
如何通过jdbc调用存储过程
2012/04/19 面试题
医校毕业生自我鉴定
2014/01/25 职场文书
红色旅游心得体会
2014/09/03 职场文书
计算机教师工作总结
2015/08/13 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
2016春节放假通知范文
2015/08/18 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
Node.js实现断点续传
2021/06/23 Javascript
详解Python为什么不用设计模式
2021/06/24 Python