uploadify 限制图片尺寸

Posted 2020-07-09

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来缩图，这下用户上传在大尺寸的图片，都可以友好的显示