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

 更新时间:2014年09月01日 15:09:33   投稿:whsnow  
这篇文章主要介绍了上传图片js判断图片尺寸和格式并兼容IE,需要的朋友可以参考下

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" />

相关文章

  • js数组常见操作及数组与字符串相互转化实例详解

    js数组常见操作及数组与字符串相互转化实例详解

    这篇文章主要介绍了js数组常见操作及数组与字符串相互转化方法,以实例形式较为详细的分析并总结了JavaScript数组的常见使用技巧与转化方法,需要的朋友可以参考下
    2015-11-11
  • JS简单判断函数是否存在的方法

    JS简单判断函数是否存在的方法

    这篇文章主要介绍了JS简单判断函数是否存在的方法,涉及javascript函数运行与类型判定相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • three.js欧拉角和四元数的使用方法

    three.js欧拉角和四元数的使用方法

    这篇文章主要给大家介绍了关于three.js欧拉角和四元数的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者使用three.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-07-07
  • uniapp中scroll-view实现自动滚动到最底部的方法

    uniapp中scroll-view实现自动滚动到最底部的方法

    这篇文章主要给大家介绍了关于uniapp中scroll-view实现自动滚动到最底部的相关资料,在uniapp日常开发的过程中经常会有局部滚动的需求,而scroll-view组件正好可以满足这一需求,需要的朋友可以参考下
    2023-10-10
  • ajax请求乱码的解决方法(中文乱码)

    ajax请求乱码的解决方法(中文乱码)

    这篇文章主要介绍了ajax请求乱码的解决方法(中文乱码),需要的朋友可以参考下
    2014-04-04
  • js滚轮事件兼容性问题需要注意哪些

    js滚轮事件兼容性问题需要注意哪些

    这篇文章主要为大家详细介绍了js滚轮事件需要注意的兼容性问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法

    浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法

    由于同源策略的缘故,ajax不能向不同域的网站发出请求。接下来通过本文给大家介绍jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法,需要的朋友可以参考下
    2017-02-02
  • 深入理解JavaScript的事件执行机制

    深入理解JavaScript的事件执行机制

    本文主要介绍了JavaScript的事件执行机制,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • js代码判断是否处于微信浏览器内两种方式

    js代码判断是否处于微信浏览器内两种方式

    微信内置浏览器屏蔽了下载链接,如果用户是用微信内置浏览器打开的,则提示用户换一个浏览器打开页面,那么该如何判断用户是否是用微信浏览器呢?这篇文章主要给大家介绍了关于js代码判断是否处于微信浏览器内的两种方式,需要的朋友可以参考下
    2023-10-10
  • 密码强度检测效果实现原理与代码

    密码强度检测效果实现原理与代码

    密码强度检测有利于提醒增加密码的安全指数,更好的保护密码安全,接下来介绍密码强度检测效果的实现
    2013-01-01

最新评论