上传图片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利用append添加元素报错的解决方法
Jul 01 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 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多线程下载远程多个文件
2013/06/25 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
vue写h5页面的方法总结
2019/02/12 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
Python操作MySQL简单实现方法
2015/01/26 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python构建基础的爬虫教学
2018/12/23 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
英文演讲稿
2014/05/15 职场文书
避暑山庄导游词
2015/02/04 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
外出培训学习心得体会
2016/01/18 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python
python中 .npy文件的读写操作实例
2022/04/14 Python