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. 设置linux新用户默认当前目录及使用的shell

    切换到root用户,直接修改/etc/passwd文件,找到你的用户名你一行,如下图所示修改路径,然后保存即可.

  2. CentOS6.3重新加载网卡报错 Active connection path: /org/freedesktop/NetworkManager/ActiveConnection

    现象系统无法上网,ping本地127.0.0.1不通,局域网IP也不通,网关也无法ping通 通过 ifconfig 查看网卡和lo回环口 都已启用 重启network服务报错如下: # servic ...

  3. Ex 6_21 最小点覆盖问题_第八次作业

    子问题定义: 对于图中的每个结点,有两种状态,即属于最小点覆盖和不属于最小点覆盖,定义minSet[i][0]表示结点i属于点覆盖,并且以i为根的树的最小点覆盖的大小.minSet[i][1]表示点i ...

  4. Fiddler模拟post四种请求数据

    前言: Fiddler是一个简单的http协议调试代理工具,它界面友好,易于操作,是模拟http请求的利器之一. 在接口测试中,接口通常是get请求或者post请求.get请求的测试一般较为简单,只需 ...

  5. 读取本地图片 BitmapImage

    BitmapImage defImage = new BitmapImage(); defImage.BeginInit(); defImage.UriSource = new Uri(@" ...

  6. 《剑指offer》-数字在排序数组中出现的次数

    统计一个数字在排序数组中出现的次数. 首先吐槽下出题人的用词,啥叫排序数组?"排序"是个动词好么,"有序"作为一个形容词表示状态,修饰"数组" ...

  7. JQuery中的工具类(五)

    一:1.serialize()序列表表格内容为字符串.返回值jQuery示例序列表表格内容为字符串,用于 Ajax 请求. HTML 代码:<p id="results"&g ...

  8. C#学习网站收集

    1. 大名鼎鼎的CodeGuru 号称代码领头羊 非常著名的关于程序开发的网站,大量的资料.强烈推荐 http://www.codeguru.com/ - 外文 2. Developer.com: A ...

  9. 在django中使用FormView,success_url死活不能生效的问题

    真的不知道是怎么回事, 以前都是手动的, form使用modelform. view使用createview. 今天写新系统时,为了更灵活. form使用form,(这样一来,可以在form是随便按数 ...

  10. CentOS6.8安装RabbitMQ

    1.安装erlang 安装依赖包: yum install xmlto gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel unixODBC ...