上传图片js判断图片尺寸和格式兼容IE


Posted in Javascript onSeptember 01, 2014

js代码:

$(".head").change(function() {
var val = $(this).val();
if(!val.match( /.jpg|.gif|.png|.bmp/i ) ){ 
imgtype = false;
alert('图片格式无效!'); 

}else{
if (FileReader) {
var reader = new FileReader(),
file = this.files[0];
reader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
image.onload=function(){
if(image.width > 128 || image.height > 128){
fill = false;
alert("头像尺寸应在128x128之间");
} 

}


};
reader.readAsDataURL(file);
}else{
//这是ie9版本
$(".preview_size_fake").show();
var objPreviewSizeFake = $(".preview_size_fake").get(0);
var fileupload = $(this).get(0);
fileupload.select();
fileupload.blur();
path = document.selection.createRange().text;

if (/"\w\W"/.test(path)) {
path = path.slice(1,-1);
}

objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = path; 
if(objPreviewSizeFake.offsetWidth > 128 || objPreviewSizeFake.offsetHeight > 128){
fill = false;
alert("头像尺寸应在128x128之间");
}
document.selection.empty();
}
}
});

css代码(这个是必须写的,如果不写,ie下不起作用)

.preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */ 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); 
height: 1px;
visibility:hidden; 
overflow: hidden; 
display: none;
}

html代码:

<input class="head" type="file" name="avatar">
<img class="preview_size_fake" />
Javascript 相关文章推荐
JavaScript加密解密7种方法总结分析
Oct 07 Javascript
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
jquery json 实例代码
Dec 02 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
vue.js的简单自动求和计算实例
Nov 08 Javascript
影响jQuery使用的14个方面
Sep 01 #Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 #Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 #Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 #Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 #Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 #Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 #Javascript
You might like
一段防盗连的PHP代码
2006/12/06 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
js停止输出代码
2008/07/20 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
Python的re模块正则表达式操作
2016/05/25 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
中学生学雷锋演讲稿
2014/04/26 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
质量整改报告范文
2014/11/08 职场文书
初中同学会致辞
2015/08/01 职场文书
交通安全教育主题班会
2015/08/12 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript