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 相关文章推荐
js文件缓存之版本管理详解
Jul 05 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
详解vue2 $watch要注意的问题
Sep 08 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
javascript实现点击小图显示大图
Nov 29 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操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
简单了解python的一些位运算技巧
2019/07/13 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
pytorch梯度剪裁方式
2020/02/04 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
python如何实现递归转非递归
2021/02/25 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
党校培训思想汇报
2013/12/30 职场文书
年终总结会议主持词
2014/03/17 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书