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