Welcome

首页 / 脚本样式 / JavaScript / jQuery获取file控件中图片的宽高与大小

问题
如何判断input file表单里上传的图片的宽高和大小呢?
解决方案
这个时候图片还没真正上传,也不是在页面上展示,不能使用$(“#id”).width(),$(“#id”).height()这种方式。
在Stack Overflow找到一个方法获取input file图片文件的宽高:
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图片的宽高和大小,如下:
//获取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中这样调用
(function () {//省略其他代码getImageWidthAndHeight("image_file", function (obj) { if (obj.width != 843 || obj.height != 1038) {$.messager.alert("操作提示", "弹窗图片宽高必须是843*1038px"); }});})(jQuery)
好了,这样就OK了。以上就是jQuery获取intput file图片的宽高和大小的全部内容了,相信本文的内容会对大家平时使用jQuery和图片上传的时候很有帮助的。