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

网络编程 2025-03-25 04:07www.168986.cn编程入门

随着网络的发展与普及,图片上传已成为我们日常使用中不可或缺的一部分。如何确保上传的图片满足特定的尺寸和大小要求呢?本文将通过实例代码,向大家展示如何利用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部分的内容。

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by