上传图片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 相关文章推荐
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
微信小程序商品详情页底部弹出框
Nov 22 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
影响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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
PHP新手上路(十一)
2006/10/09 PHP
php文件操作实例代码
2012/05/10 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
PHP getName()函数讲解
2019/02/03 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
详解 Python 与文件对象共事的实例
2017/09/11 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python调用C语言的实现
2019/07/26 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
毕业生自荐书
2014/02/02 职场文书
挂牌仪式主持词
2014/03/20 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2015年植树节活动总结
2015/02/06 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
同事欢送会致辞
2015/07/31 职场文书
会计岗位工作总结
2015/08/12 职场文书
小学毕业教师寄语
2019/06/21 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
OpenCV实现反阈值二值化
2021/11/17 Java/Android