上传图片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 相关文章推荐
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 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实现Ftp用户的在线管理的代码
2007/03/06 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
js玩一玩WSH吧
2007/02/23 Javascript
Add a Table to a Word Document
2007/06/15 Javascript
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
JS中递归函数
2016/06/17 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
python 统计代码行数简单实例
2017/05/04 Python
Php多进程实现代码
2018/05/07 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
Shell脚本如何向终端输出信息
2014/04/25 面试题
业务代表的岗位职责
2013/11/16 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
教你怎么用Python生成九宫格照片
2021/05/20 Python
详细了解MVC+proxy
2021/07/09 Java/Android