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学习笔记8 用JSON做原型
Jan 11 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 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
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
python判断是空的实例分享
2020/07/06 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
大学生毕业自荐信
2013/10/10 职场文书
宣传普通话标语
2014/06/27 职场文书
大学生创业计划书
2014/08/14 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
JVM之方法返回地址详解
2022/02/28 Java/Android
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技