размер изображения, а затем проверить критерий

Question

размер изображения, а затем проверить критерий

0

Мне нужна функциональность, в которой я загружаю изображение и проверяю максимальные критерии. Если изображение больше, чем максимальные критерии, тогда показывается предупреждение msg

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

Я могу делать все функциональные возможности, но когда я загружаю изображение, я даю условие, чтобы показать выбранное изображение фактического Hight a Width.and, я получаю предыдущую высоту изображения шириной

мой курс:

<!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>

Вопрос/проблема: каждый раз, когда я получаю предыдущий выбранный размер изображения, не текущее измерение изображения изображения.

Надеюсь, вы поймете мой вопрос

sonalgoyal 16 дек. 2013, в 10:35

Источник

0

Я думаю, что проблема в том, что это мой заданный идентификатор. Потому что я получаю URL-адрес изображения "бла" и его идентификатор выбранного изображения, которое отображается в div.thats, почему это показывает размер предыдущего изображения. Не так ли?
sonalgoyal 16 дек. 2013, в 09:38
0

Это потому, что вы проверяете ширину и высоту источника id = "blah", который обновляется только позже.
C. S. 16 дек. 2013, в 09:43
0

тогда какая альтернатива?
sonalgoyal 16 дек. 2013, в 09:45

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Я думаю, что проблема в том, что это мой заданный идентификатор. Потому что я получаю URL-адрес изображения "бла" и его идентификатор выбранного изображения, которое отображается в div.thats, почему это показывает размер предыдущего изображения. Не так ли?
Это потому, что вы проверяете ширину и высоту источника id = "blah", который обновляется только позже.

SW4 · Accepted Answer · 2013-12-16T06-57-00.000Z

См. ЭТУ FIDDLE, важно изменить, что ваша логика wrong- вы проверяете высоту и ширину относительно ранее загруженного изображения (blah), вам действительно нужно выполнить загрузку, чтобы проверить properties-, а затем определить, какое действие брать.

Обратите внимание, что приведенный ниже/связанный пример принимает этот ответ на 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]);
});

он работает в скрипте, но не в моей странице HTML. Пожалуйста, проверьте, где проблема в моем coading.i добавлении кода в мой вопрос.
пожалуйста, проверьте приведенный выше код и сказал мне, в чем проблема