jQuery File Upload 判断图片尺寸,限定图片宽高的办法
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 判断图片尺寸,限定图片宽高的办法的更多相关文章
- jQuery File Upload 图片上传解决方案兼容IE6+
1.下载:https://github.com/blueimp/jQuery-File-Upload 2.命令: npm install bower install ================= ...
- jQuery File Upload
jQuery File Upload介绍.............................................. 2 实现基本原理......................... ...
- jQuery File Upload 插件 php代码分析
jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据 在进入initialize()中的po ...
- 定制jQuery File Upload为微博式单文件上传
日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性使用 2.5 许可协议』进行许可. jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方 ...
- jQuery File Upload 单页面多实例的实现
jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...
- 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮
需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...
- jQuery File Upload blueimp with struts2 简单试用
Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题 虽然图片都可以上传 但是response报错 我下载的是8.8.7木有问题 但是8.8.7版本结合修改main. ...
- jQuery File Upload的使用
jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示等,以下就介绍一下该插件的简单使用 1.需要加载 ...
- jQuery File Upload 文件上传插件使用一 (最小安装 基本版)
jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等. 可以说你能想到的功能它都有.你没想到的功能它也有.. ...
随机推荐
- linux系统的休眠与唤醒简介
转自:http://blog.csdn.net/haomcu/article/details/7398703 系统挂起(Suspend)是电源管理(APM&ACPI)的一个特性,给用户带来了很 ...
- Android网络通信(8):WiFi Direct
Android网络通信之WiFi Direct 使用Wi-Fi Direct技术可以让具备硬件支持的设备在没有中间接入点的情况下进行直接互联.Android 4.0(API版本14)及以后的系统都提供 ...
- PCA和SVD最佳理解
奇异值分解(SVD)原理与在降维中的应用 https://www.cnblogs.com/pinard/p/6251584.html 最通俗易懂的PCA主成分分析推导 https://blog.csd ...
- Linux在bash history当中添加timestamp
执行以下两条命令即可 echo 'export HISTTIMEFORMAT="%y-%m-%d %T "' >> /etc/profile source /etc/p ...
- PreparedStatement setDate setTimestamp ,util.date sql.date区别
如果数据库中是时分秒,那么切记,用setTimestamp 而不是 setDate(仅仅精确是天,不含时分秒)
- 步步为营-17-FileStream-文件加密/解密
以前使用的File是操作小的文本文件,用的并不常见,FileStream(操作字节),可以操作所有格式的文件,用途较广泛 下面做一个通过文件流给文件加密解密的小软件. using System; us ...
- HDU1536 S-Nim(sg函数变换规则)
S-Nim Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Subm ...
- MVCJSONJQuery分页实现
思路: 1.用Ado.NET获取数据 2.控制器中创建一个方法参数为搜索条件 3.返回前台一个Json对象,把对象用一个类封装 4.用JQuery接收数据 public ActionResult In ...
- H 模拟水题
n个人 小明编号为m 从编号为a的人开始数 起始数字为b 遇到素数duang 并反相 求小明应该说什么 Sample Input 310 2 //n m3 4 //a b3 32 64 13 8 Sa ...
- jQuery插件实践之轮播练习(二)
所有文章搬运自我的个人主页:sheilasun.me 上一篇中学习了jQuery插件的写法,这篇该着手实现啦.首先明确一下轮播要具备哪些功能: 可以点击"向后"按钮向后翻页 可以点 ...