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 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 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扩展ZF――Validate扩展
2008/01/10 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
详解Python迭代和迭代器
2016/03/28 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
Python使用Pygame绘制时钟
2020/11/29 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
数控技术专科生自我评价
2014/01/08 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
安全生产工作汇报
2014/10/28 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
感动中国何玥观后感
2015/06/02 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS