上传图片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跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
javascript实现列表切换效果
May 02 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
JS随机密码生成算法
Sep 23 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
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
List the Codec Files on a Computer
2007/06/18 Javascript
document.compatMode介绍
2009/05/21 Javascript
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
详解Python安装scrapy的正确姿势
2018/06/26 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
教师实习自我鉴定
2013/12/11 职场文书
暑期实习鉴定
2013/12/16 职场文书
技校毕业生的自我评价
2013/12/27 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
学生检讨书如何写
2014/10/30 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
法制教育观后感
2015/06/17 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js