Question

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

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>

问题/问题：每次我获取之前选择的图像尺寸而非当前图像图像尺寸。

希望你理解我的问题

Answer 1

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

请注意，下面/链接的示例需要this answer on 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]);
});

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

1 个答案: