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 相关文章推荐
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
详解ES6中class的实现原理
Oct 03 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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
刷新时清空文本框内容的js代码
2007/04/23 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
简单的js计算器实现
2016/10/26 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Django中信号signals的简单使用方法
2019/07/04 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
园林设计专业毕业生求职信
2014/03/23 职场文书
寄语是什么意思
2014/04/10 职场文书
庆六一宣传标语
2014/10/08 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
论文答辩开场白大全
2015/05/27 职场文书