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,超强推荐share.js
Dec 23 Javascript
改版了网上的一个js操作userdata
Apr 27 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
javascript折半查找详解
Jan 26 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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 session处理的定制
2009/03/16 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
名片管理系统python版
2018/01/11 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
解决python删除文件的权限错误问题
2018/04/24 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
python实现小世界网络生成
2019/11/21 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
抄作业检讨书
2014/02/17 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
婚庆答谢词
2015/01/04 职场文书
学历证明样本
2015/06/16 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
Linux安装Docker详细教程
2022/07/07 Servers