上传图片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计算时间差的函数分享
Jul 04 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
浅析vue深复制
Jan 29 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 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/11/25 PHP
mysql 字段类型说明
2007/04/27 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
php检测useragent版本示例
2014/03/24 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
php轻松实现文件上传功能
2016/03/03 PHP
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
Python封装shell命令实例分析
2015/05/05 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
大学生学业生涯规划
2014/01/05 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
演讲比赛策划方案
2014/06/11 职场文书
激励员工的口号
2014/06/16 职场文书
装配出错检讨书
2014/09/23 职场文书
教师三严三实心得体会
2014/10/11 职场文书
公务员年度个人总结
2015/02/12 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
导游词之安徽九华山
2019/09/18 职场文书