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 相关文章推荐
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
puppeteer库入门初探
Jan 09 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
js中判断控件是否存在
2010/08/25 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
Python实现批量检测HTTP服务的状态
2016/10/27 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
python的re正则表达式实例代码
2018/01/24 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
详解Python文件修改的两种方式
2019/08/22 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Django URL参数Template反向解析
2020/11/24 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
应征英语教师求职信
2013/11/27 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
技术入股合作协议书
2016/03/21 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
python实现学生信息管理系统(面向对象)
2022/06/05 Python