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编程起步(第一课)
Jan 10 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
图片动画横条广告带上下滚动的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遍历目录文件的常用方法小结
2017/02/03 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
node.js基础知识汇总
2020/08/25 Javascript
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Pytorch转tflite方式
2020/05/25 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
一个SQL面试题
2014/08/21 面试题
大学生党员承诺书
2014/05/20 职场文书
中学教师个人总结
2015/02/10 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
采购员工作总结范文
2015/08/12 职场文书
2016年国陪研修感言
2015/11/18 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
ant design vue的form表单取值方法
2022/06/01 Vue.js