图像的尺寸，然后检查标准

dimension of an image and then check the critera

本文关键字：然后 检查 标准 图像      更新时间：2023-09-26

我需要一个上传图像并检查最大标准的功能。如果图像大于最大标准，则显示警报消息

alert("Height is bigger then our max criteria pls select image max height and width =etc");

我可以完成所有功能，但当我上传图像时，我会给出一个条件来显示所选图像的实际高度和宽度。我会得到以前的图像高度和宽度

我的围板是：

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://jqueryui.com/resources/demos/style.css" rel="stylesheet"></link>
<script type="text/jquery">

    function readImage(file) {
    var reader = new FileReader();
    var image = new Image();
    var maxh = 800;
    var maxw = 800;
    reader.readAsDataURL(file);
    reader.onload = function (_file) {
        image.src = _file.target.result; // url.createObjectURL(file);
        image.onload = function () {
            var w = this.width,
                h = this.height,
                t = file.type, // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~ (file.size / 1024) + 'KB';
            if (w > maxw && h > maxh) {
                alert("Height is bigger then over max criteria pls select image max height and width                                            =2024X2024");
                alert(width);
                alert(height);
            } else {

                $('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
            }
        };
        image.onerror = function () {
            alert('Invalid file type: ' + file.type);
        };
    };
}
$("#choose").change(function (e) {
    if (this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
</script>

<style>
  #uploadPreview img {
    height:32px;
}
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
</body>
</html>

问题：每次我得到的是以前选择的图像尺寸，而不是当前图像尺寸。

希望你能理解我的问题

请参阅THIS FIDDLE，重要的变化是您的逻辑错误-您正在根据之前上传的图像检查高度和宽度（等等），实际上需要执行上传来检查属性-然后确定要采取的操作。

请注意，下面的/链接的示例采用了SO上的答案，为您的目的进行了编辑。

HTML

<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>

JS-

function readImage(file) {
    var reader = new FileReader();
    var image = new Image();
    var maxh = 800;
    var maxw = 800;
    reader.readAsDataURL(file);
    reader.onload = function (_file) {
        image.src = _file.target.result; // url.createObjectURL(file);
        image.onload = function () {
            var w = this.width,
                h = this.height,
                t = file.type, // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~ (file.size / 1024) + 'KB';
            if (w > maxw && h > maxh) {
                alert("Height is bigger then over max criteria pls select image max height and width                                            =2024X2024");
                alert(width);
                alert(height);
            } else {

                $('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
            }
        };
        image.onerror = function () {
            alert('Invalid file type: ' + file.type);
        };
    };
}
$("#choose").change(function (e) {
    if (this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
相关文章：