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和图片上传的时候很有帮助的。

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...