jQuery获取file控件中图片的宽高与大小

前端之家收集整理的这篇文章主要介绍了jQuery获取file控件中图片的宽高与大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

问题

如何判断input file表单里上传图片的宽高和大小呢?

解决方

这个时候图片还没真正上传,也不是在页面上展示,不能使用$(“#id”).width(),$(“#id”).height()这种方式。

在Stack Overflow找到一个方法获取input file图片文件的宽高:

发现可以用,仅在火狐中测试了,其他浏览器兼容性未知,因为后台使用,所以暂且不管兼容性,拿来封装了一下。

我把这个函数完善了一下,获取input file图片的宽高和大小,如下:

获取input图片宽高和大小 function getImageWidthAndHeight(id,callback) { var _URL = window.URL || window.webkitURL; $("#" + id).change(function (e) { var file,img; if ((file = this.files[0])) { img = new Image(); img.onload = function () { callback && callback({"width": this.width,"height": this.height,"filesize": file.size}); }; img.src = _URL.createObjectURL(file); } }); }

这里使用了一个回调方法,回调方法的参数是这个

json

对象,包含宽度、高度和大小,

在jQuery中这样调用

代码 getImageWidthAndHeight('image_file',function (obj) { if (obj.width != 843 || obj.height != 1038) { $.messager.alert('操作提示','弹窗图片宽高必须是843*1038px'); } }); })(jQuery)

好了,这样就OK了。以上就是jQuery获取intput file图片的宽高和大小的全部内容了,相信本文的内容会对大家平时使用jQuery和图片上传的时候很有帮助的。

猜你在找的jQuery相关文章