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 控制弹出窗口
Apr 10 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
JS实现简单日历特效
Jan 03 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
vue组件是如何解析及渲染的?
Jan 13 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
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
numpy中的高维数组转置实例
2018/04/17 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
Django实现随机图形验证码的示例
2020/10/15 Python
Python try except else使用详解
2021/01/12 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
消防安全管理制度
2014/02/01 职场文书
美术教师岗位职责
2014/03/18 职场文书
大学生求职信例文
2014/06/29 职场文书
收款委托书范本
2014/09/11 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
小学课改工作总结
2015/08/13 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python