上传图片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 05 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 Javascript
javascript实现倒计时关闭广告
Feb 09 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
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
php封装的验证码类分享
2017/02/26 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Python新手学习raise用法
2020/06/03 Python
PyQt实现计数器的方法示例
2021/01/18 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
大学军训感言1500字
2014/03/09 职场文书
美容院店长岗位职责
2014/04/08 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
2015年度保密工作总结
2015/04/24 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python