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 相关文章推荐
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
js表数据排序 sort table data
Feb 18 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
图片动画横条广告带上下滚动的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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
PHP7 新增常量
2021/03/09 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
详解Angular cli配置过程记录
2019/11/07 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python 功能和特点(新手必学)
2015/12/30 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
我的大学生活职业生涯规划
2014/01/02 职场文书
企业承诺书格式
2014/05/21 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS