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

随着网络的发展与普及，图片上传已成为我们日常使用中不可或缺的一部分。如何确保上传的图片满足特定的尺寸和大小要求呢？本文将通过实例代码，向大家展示如何利用jQuery获取file控件中图片的宽高与大小，以便在上传前进行验证。

我们需要理解的是，在图片还未真正上传，也未在页面展示的情况下，我们无法直接使用jQuery的$(“id”).width()和$(“id”).height()方法来获取图片的宽高。那么，该如何解决这个问题呢？

在Stack Overflow上，有一个被大家广泛采用的方法可以获取input file中图片的宽高。该方法首先创建一个Image对象，然后通过设置Image对象的src属性为文件URL来加载图片。当图片加载完成后，就可以获取到图片的宽高了。这个方法仅在火狐浏览器中进行了测试，其他浏览器的兼容性尚未明确。尽管存在兼容性问题，但对于后台使用来说，暂时可以忽略。

在此基础上，我们可以进一步完善这个函数，使其能够同时获取图片的宽高和大小。下面是一个改进后的函数：

// 获取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(); // 创建一个新的Image对象

img.onload = function () { // 当图片加载完成时，执行回调函数

callback && callback({ "width": this.width, "height": this.height, "filesize": file.size });

};

img.src = _URL.createObjectURL(file); // 设置Image对象的src属性为文件URL

}

});

}

如何使用这个函数呢？在jQuery中，你可以这样调用：

(function () {

// 其他代码省略...

getImageWidthAndHeight('image_file', function (obj) { // 调用函数，并传入回调函数

if (obj.width != 843 || obj.height != 1038) { // 如果图片的宽高不符合要求

$.messager.alert('操作提示', '弹窗图片宽高必须是843x1038px'); // 弹出提示信息

}

});

})(jQuery) // 使用jQuery执行上述代码

如此一来，你就可以在图片上传前，验证其尺寸和大小是否符合你的要求了。相信本文的内容会对大家在使用jQuery进行图片上传时提供很大的帮助。若你需要在网页的body部分渲染这些内容，可以使用如下代码：

Cambrian.render('body', {content: '这里是你的内容'}); // 使用Cambrian框架渲染body部分的内容。