上传图片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 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
Jquery倒计时源码分享
May 16 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
对Layer UI 模块化的用法详解
Sep 26 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
第一个无线电台是由谁发明的
2021/03/01 无线电
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
javascript Function函数理解与实战
2017/12/01 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
3分钟学会一个Python小技巧
2018/11/23 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
python 标准差计算的实现(std)
2019/07/29 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
初中物理教学反思
2014/01/14 职场文书
个人优缺点自我评价
2014/01/27 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
会议欢迎词
2015/01/23 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
SpringBoot详解执行过程
2022/07/15 Java/Android