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中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
Javascript 多物体运动的实现
Dec 24 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
vue实现简单的登录弹出框
Oct 26 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
javascript 面向对象思想 附源码
2009/07/07 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
深入学习JavaScript中的bom
2019/05/27 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
python逐行读取文件内容的三种方法
2014/01/20 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
Python构建图像分类识别器的方法
2019/01/12 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
django模板结构优化的方法
2019/02/28 Python
在Django中实现添加user到group并查看
2019/11/18 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
汉语专业应届生求职信
2013/10/01 职场文书
大学生实习思想汇报
2014/01/12 职场文书
教室布置标语
2014/06/26 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
财务审计整改报告
2014/11/06 职场文书
中标通知书格式
2015/04/17 职场文书
创业计划书之农家乐
2019/10/09 职场文书
Python实现仓库管理系统
2022/05/30 Python