上传图片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 相关文章推荐
Cookie 小记
Apr 01 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
javascript实现完美拖拽效果
May 06 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
angularjs实现的购物金额计算工具示例
May 08 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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开发框架的对比
2013/07/05 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
jupyter实现重新加载模块
2020/04/16 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
《搭石》教学反思
2014/04/07 职场文书
消防工作实施方案
2014/06/09 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
群众路线个人整改措施
2014/10/24 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
女性励志书籍推荐
2019/08/19 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL