uploadify 限制图片尺寸

jquery uploadify可以限制文件类型,文件的大小,但对宽高没有限制,项目需要图片上传限制图片宽高度,避免客户上传大尺寸,目前我只前端设置判断宽高度首先我设置个隐藏的img元素
<img  id="testimg" src="__ADMIN.IMG__/noavatar_big.gif" style="display:none">

在uploadify的onUploadSuccess里做这个设置判断

当图片上传成功会返回一个图片地址,我把隐藏的img元素的地址设置后台返回来地址

然后来判断这个img的图片的宽度及高度

onUploadSuccess:function(file,data,response){
  if(data){
      $(‘#testimg‘).attr(‘src‘,ThinkPHP[‘ROOT‘]+‘/‘+$.parseJSON(data));                                   $(‘#testimg‘).one(‘load‘,function(){
			var imgWidth = this.width;
                        var imgHeight = this.height;
			 if(imgWidth > 200 || imgHeight >200){
				alert(‘建议使用200px*200px尺寸图片‘)
					}else{

                                   //这里图片尺寸小于200px*200px可以开始代码逻辑
                                         }

   }
}

这仅仅是前段限制图片尺寸,并不完美,固然这里显示了图片尺寸,实际上

图片还是上传到服务器上了,否则我也无法根据后台返回来地址,来设置隐藏img元素的图片地址

并不完美,后期有空在后端来限制图片的上传。

还有一种思路我认为比较好,就是前端我也不做图片尺寸限制,你上传任何一张图片,我都把图片按宽度200px等比缩小处理,

在把缩小的地址返回给前端并显示!这样做好像好一点;因为不是所有用户会ps那样的工具,去把喜欢的图片 裁剪成 200px*200px规则图片

然后在来上传,给用户体验不好,

经过尝试,后台如果把任何按200px*200px 来缩放 返回前台显示 图片效果就不好了

左边是缩略图,右边是截图

所以我这边改成 图片按照500px*500px的来缩

这样看起来 还可以!根据我这里页面排版的情况,我最后是按照450px*450px来缩图,这下用户上传在大尺寸的图片,都可以友好的显示

时间: 2024-10-10 07:39:32

uploadify 限制图片尺寸的相关文章

CSS3------background-size(背景图片尺寸属性)

background-size 可以设置背景图片的大小,数值包括 长度length和百分比percentage. 并且会根据背景原点位置 background-origin 设置其图片覆盖的范围.那么下面我们一起来了解这个background-size属性吧. background-size语法 w3c对background-size的语法规定如下: 属性名: background-size 属性值: <bg-size>* 其中 bg-size = [ <length> | <

图片未加载完成时预测图片尺寸

/***************************************************************************************     * 图片头数据加载就绪获取图片尺寸     * @version    2011.05.27     * @author    TangBin     * @see             * @param    {String}    图片路径     * @param    {Function}    尺寸就

像素、分辨率、图片尺寸

像素,一个点 分辨率,每英寸长度上,像素的数量,简写dpi,通常是300dpi 图片尺寸,图片的宽高,可用图片的像素数和分辨率计算出来,图片宽(cm厘米)=图片的宽像素数/分辨率,高=图片的高像素数/分辨率,打印时可设置dpi,这时图片尺寸会变化,具体尺寸可从上述公式计算. 如,像素数不变,分辨率增加,打印尺寸减小:像素数减小,分辨率不变,打印尺寸减小 另图片大小,即图片占硬盘容量, 跟像素数多,压缩比低,压缩质量高,大小越大. 如像素数不变,减小压缩比,文件大小增加

用Python更改图片尺寸大小

1.PIL包推荐Pillow. 2.源码: #encoding=utf-8 #author: walker #date: 2014-05-15 #function: 更改图片尺寸大小 import os import os.path from PIL import Image ''' filein: 输入图片 fileout: 输出图片 width: 输出图片宽度 height:输出图片高度 type:输出图片类型(png, gif, jpeg...) ''' def ResizeImage(f

一种使用GDI+对图片尺寸和质量的压缩方法

今天同事向我询问图片压缩的算法,我想起大概两三年前做过的一个项目.其中包含了尺寸和质量两种压缩算法,并且支持JPEG.bmp.PNG等格式.今天把这段逻辑贴出来,供大家参考.(转载请指明来源于breaksoftware的CSDN博客) 尺寸压缩 bool CompressImagePixel( const WCHAR* pszOriFilePath, const WCHAR* pszDestFilePah, UINT ulNewHeigth, UINT ulNewWidth ) { // Ini

angular-file-upload封装为指令+图片尺寸限制

不了解angular-file-upload基础使用 请先参考http://blog.csdn.net/lai_xu/article/details/49535847 博客地址 下文如果有更好的建议请多多评论 1. directive.js中的指令编写 /* 上传插件 */ app.directive('myUpload', function (FileUploader) { var helper = { getType: function (name) { return '|' + name.

CSS3:background-size背景图片尺寸属性

background-size可以设置背景图片的大小,数值包括 长度length和百分比percentage. 并且会根据背景原点位置background-origin设置其图片覆盖的范围.那么下面我们一起来了解这个background-size属性吧. background-size语法 w3c对background-size的语法规定如下: 属性名: background-size 属性值: <bg-size>* 其中 bg-size = [ <length> | <pe

[转]OpenCV图像金字塔:高斯金字塔、拉普拉斯金字塔与图片尺寸缩放

[OpenCV入门教程之十三]OpenCV图像金字塔:高斯金字塔.拉普拉斯金字塔与图片尺寸缩放 2014-05-18 18:58 36007人阅读 评论(54) 收藏 举报 本文章已收录于:  OpenCV知识库 本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/26157633 作者:毛星云(浅墨)    微博:http://weibo.com/u/1723155442 知乎:http

根据Url 获取图片尺寸 iOS

// 根据图片url获取图片尺寸 +(CGSize)getImageSizeWithURL:(id)imageURL {     NSURL* URL = nil;     if([imageURL isKindOfClass:[NSURL class]]){         URL = imageURL;     }     if([imageURL isKindOfClass:[NSString class]]){         URL = [NSURL URLWithString:ima