微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

问题

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

解决方

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

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

rush:js;"> var _URL = window.URL || window.webkitURL; $("#file").change(function (e) { var file,img; if ((file = this.files[0])) { img = new Image(); img.onload = function () { alert(this.width + " " + this.height); }; img.src = _URL.createObjectURL(file); } });

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

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

rush:js;"> //获取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中这样调用

rush:js;"> (function () { //省略其他代码 getimageWidthAndHeight('image_file',function (obj) { if (obj.width != 843 || obj.height != 1038) { $.messager.alert('操作提示','弹窗图片宽高必须是843*1038px'); } }); })(jQuery)

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

原文地址:https://www.jb51.cc/jquery/46801.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐