上传图片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 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
Javascript的this详解
Mar 23 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 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
PHP与javascript的两种交互方式
2006/10/09 PHP
PHP数据类型的总结分析
2013/06/13 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
python求最大值最小值方法总结
2019/06/25 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Python容器类型公共方法总结
2020/08/19 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
物理系毕业生自荐信
2013/11/01 职场文书
电焊工岗位职责
2014/03/06 职场文书
比赛口号大全
2014/06/10 职场文书
助学感谢信范文
2015/01/21 职场文书
中秋节祝酒词
2015/08/12 职场文书
mysql数据库实现设置字段长度
2022/06/10 MySQL