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 对象、函数和继承
Jul 07 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
jquery的map与get方法详解
Nov 04 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
JS通用方法触发点击事件代码实例
Feb 17 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
laravel-admin的多级联动方法
2019/09/30 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
Jquery基础教程之DOM操作
2015/08/19 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python实现购物车功能的方法分析
2017/11/10 Python
详解Python中的正则表达式
2018/07/08 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
Python数据可视化图实现过程详解
2020/06/12 Python
python 实用工具状态机transitions
2020/11/21 Python
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
酒店出纳岗位职责
2013/12/29 职场文书
安全生产先进个人材料
2014/02/06 职场文书
小学家长评语大全
2014/04/16 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers