上传图片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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
top.location.href 没有权限 解决方法
Aug 05 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
从理论角度讨论JavaScript闭包
Apr 03 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
PDO::errorCode讲解
2019/01/28 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
jQuery学习笔记之jQuery的动画
2010/12/22 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
python将字母转化为数字实例方法
2019/10/04 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
化验室技术员岗位职责
2013/12/24 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
授权委托书格式
2014/07/31 职场文书
2015年工程部工作总结
2015/04/30 职场文书
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers