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. zabbix系列(一)centos7搭建zabbix3.0.4服务端及配置详解

    1.安装常用的工具软件 yum install -y vim wget centos7关闭防火墙 systemctl stop firewalld.service systemctl disable ...

  2. Springboot分模块开发

    这是个spring cloud项目,service-base:基础服务:service-config:配置中心:service-entity:实体类: service-gateway:服务网关:ser ...

  3. gulp自动化构建教程

    gulp及gulpfile.js编写示例    本文主要记录一个gulpfile.js示例,以免以后用的时候遗忘.但首先还是要了解gulp是什么以及如何使用. 一.什么是gulp 简单来说:就是压缩前 ...

  4. PYTHON-面向对象 类 绑定方法

    面向对象三大特性(*****) 1继承 1. 什么是继承 继承是一种新建类的方式,新建的类称之为子类/派生类,被继承的类称之为父类/基类/超类 继承与现实生活中的继承一个意思 (例如 小明继承小明他爹 ...

  5. Memcache是谁,它为什么而奋斗?【内容转】

    MemCache是什么 MemCache是一个自由.源码开放.高性能.分布式的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高 ...

  6. 【ES】学习3-请求体查询

    1.空查询 GET /index_2014*/type1,type2/_search {} GET /_search { , } 2.查询表达式 DSL只需将查询语句传递给 query 参数 GET ...

  7. Laravel Cache 缓存钉钉微应用的 Access Token

    钉钉微应用的 Access token 如何获取? Access_Token 是企业访问钉钉开放平台全局接口的唯一凭证,即调用接口时需携带Access_Token.从接口列表看,所有接口都需要携带 a ...

  8. <转>用 Java 技术创建 RESTful Web 服务

    转自:https://www.ibm.com/developerworks/cn/web/wa-jaxrs/#N1017E JAX-RS:一种更为简单.可移植性更好的替代方式 Dustin Amrhe ...

  9. 《剑指offer》-链表找环入口

    题目描述 一个链表中包含环,请找出该链表的环的入口结点. 初步想法是每个节点做几个标记,表示是否被访问过,那么遍历链表的时候就知道哪个被访问到了.但是不会实现. 另一个直觉是判断链表有环的算法中出现过 ...

  10. SSL证书的类型区别和配置教程

    证书类型 参考:  https://cloud.tencent.com/product/ssl 我们能申请到的免费证书就是DV SSL,个人站长不二之选.免费证书从哪申请,我就介绍几个,具体申请步骤百 ...