1.必须熟读jQuery File Upload 文档,在add方法中进行判断,如果不符合条件,就用 data.abort()方法取消上传动作。

$("file").fileupload({...}).on('fileuploadadd', function (e, data) {
var files=data.files;
if(navigator.userAgent.indexOf("MSIE 8.0")>0 || navigator.userAgent.indexOf("MSIE 9.0")>0){
var objPreviewSizeFake = $('<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);width:300px;visibility:hidden;" />').appendTo('body').getDOMNode();
objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
//var objPreviewSizeFake = $(".conImage").get(0);//jquery对象转化为DOM对象
var fileupload = document.getElementById("head");
var $fileupload = $(fileupload);
$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;
width_${fileInputId}=objPreviewSizeFake.offsetWidth;
height_${fileInputId}=objPreviewSizeFake.offsetHeight;
if(width_${fileInputId}> 800 || height_${fileInputId}> 800){
alert("上传的图片的宽和高都不能超过800px,当前图片高度"+width_${fileInputId}+"px,宽度"+height_${fileInputId}+"px,请裁剪后再上传。否则无法通过审核噢。");
data.abort();
}
document.selection.empty();
}else{
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
var ret = [];
reader.onload = function(theFile) {
var image = new Image();
image.onload = function() {
width_${fileInputId}=this.width;
height_${fileInputId}=this.height;
if(width_${fileInputId}> 800 || height_${fileInputId}> 800){
alert("上传的图片的宽和高都不能超过800px,当前图片高度"+width_${fileInputId}+"px,宽度"+height_${fileInputId}+"px,请裁剪后再上传。否则无法通过审核噢。");
data.abort();
}
};
image.src = theFile.target.result;
}
reader.readAsDataURL(file);
}
}
})

2.参考:

http://www.imooc.com/article/12798

jQuery File Upload 判断图片尺寸,限定图片宽高的办法的更多相关文章

  1. jQuery File Upload 图片上传解决方案兼容IE6+

    1.下载:https://github.com/blueimp/jQuery-File-Upload 2.命令: npm install bower install ================= ...

  2. jQuery File Upload

    jQuery File Upload介绍.............................................. 2 实现基本原理......................... ...

  3. jQuery File Upload 插件 php代码分析

    jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据  在进入initialize()中的po ...

  4. 定制jQuery File Upload为微博式单文件上传

    日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性使用 2.5 许可协议』进行许可. jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方 ...

  5. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  6. 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  7. jQuery File Upload blueimp with struts2 简单试用

    Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题  虽然图片都可以上传  但是response报错  我下载的是8.8.7木有问题   但是8.8.7版本结合修改main. ...

  8. jQuery File Upload的使用

    jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示等,以下就介绍一下该插件的简单使用 1.需要加载 ...

  9. jQuery File Upload 文件上传插件使用一 (最小安装 基本版)

    jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等. 可以说你能想到的功能它都有.你没想到的功能它也有.. ...

随机推荐

  1. freeradius 错误: error:140890C7:SSL routines:ssl3_get_client_certificate:peer did not return a certificate

    在进行802.1x 测试时遇到如下问题: Waking up in 4.6 seconds.(156) Received Access-Request Id 82 from 192.168.1.126 ...

  2. zabbix3.0.4关于java服务端程序内存溢出的处理

    关于java服务端程序内存溢出的处理 java服务端程序内存溢出会产生jvm.log文件,此时程序会挂掉,无法正常处理业务,需要重启服务 思路: 当存在jvm.log这个文件的时候则触发clean_j ...

  3. JavaScript对象简介(一)

    本节介绍js的9个对象:Array数组对象 Boolean(true false) Date日前对象 Math 数学对象 Number 数字对象 String 字符串对象 RegExp 正则表达式对象 ...

  4. Python源码学习(一)

    考虑到性能的要求,我在工作中用的最多的是c/c++,然而,工作中又经常会有一些验证性的工作,这些工作对性能的要求并不高,反而对完成的效率要求更高,对于这样的工作,用一种开发效率高的语言是合理的想法,鉴 ...

  5. Best quotes from The Vampire Diary(《吸血鬼日记》经典台词)

    1. I will start fresh, be someone new. 1. 我要重新开始,做不一样的自己. 2. It's the only way I'll make it through. ...

  6. eclipse 更换主题

    更换系统自带主题 依次点击 window->preferences->General->Appearance->Theme 选择主题 下载eclipse marketplace ...

  7. php中静态方法和静态属性的介绍

    静态分为两个部分:静态属性和静态方法 静态的东西都是给类用的(包括类常量),非静态的都是给对象用的 静态属性 在定义属性的时候,使用关键字static修饰的属性称之为静态属性. 静态方法 使用stat ...

  8. 认识js运动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Memcache简单使用

    1:Memcache的下载https://pan.baidu.com/s/1dFnB3NV/08中 简单安装:直接点击文件夹中的memcached.exe文件即可.但是每次使用都需要双击,比较麻烦.所 ...

  10. hdu 1757 和1005差不多 (矩阵快速幂)

    If x < 10 f(x) = x.If x >= 10 f(x) = a0 * f(x-1) + a1 * f(x-2) + a2 * f(x-3) + …… + a9 * f(x-1 ...