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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
jquery中动态效果小结
Dec 16 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
js创建对象的方式总结
Jan 10 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JSON相关知识汇总
Jul 03 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
JS实现可视化文件上传
Sep 08 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 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 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
老生常谈js数据类型
2017/08/03 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
js实现随机8位验证码
2020/07/24 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
原生js实现购物车功能
2020/09/23 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
python定时器使用示例分享
2014/02/16 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
python 基于opencv操作摄像头
2020/12/24 Python
python中xlutils库用法浅析
2020/12/29 Python
劳动纠纷调解协议书格式
2014/11/30 职场文书
刑事附带民事代理词
2015/05/25 职场文书
建党伟业电影观后感
2015/06/01 职场文书
暂住证证明
2015/06/19 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
Python first-order-model实现让照片动起来
2022/06/25 Python