Проверка максимальной высоты и максимальной ширины перед предварительным просмотром Jquery

Question

Проверка максимальной высоты и максимальной ширины перед предварительным просмотром Jquery

0

Итак, я пытаюсь выполнить проверку максимальной ширины max max до предварительного просмотра загрузки jquery, чтобы, если изображение больше максимальной высоты или максимальной ширины, чтобы предупредить пользователя и попросить их выбрать меньшую фотографию. Как я смогу сделать эту часть кода?

html-код:

<img id="uploadPreview" style="display:none;"/>

<!-- image uploading form -->
<form action="upload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/jpeg" name="image" />
<input type="submit" value="Upload">

<!-- hidden inputs -->
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
</form>

Код jquery:

function setInfo(i, e) {
    $('#x').val(e.x1);
    $('#y').val(e.y1);
    $('#w').val(e.width);
    $('#h').val(e.height);
}

$(document).ready(function() {
    var p = $("#uploadPreview");

    // prepare instant preview
    $("#uploadImage").change(function(){
        // fadeOut or hide preview
        p.fadeOut();

        // prepare HTML5 FileReader
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

        oFReader.onload = function (oFREvent) {
            p.attr('src', oFREvent.target.result).fadeIn();
        };
    });

    // implement imgAreaSelect plug in (http://odyniec.net/projects/imgareaselect/)
    $('img#uploadPreview').imgAreaSelect({
        // set crop ratio (optional)
        aspectRatio: '1:1',
        onSelectEnd: setInfo
    });
});

ThinkkSo 04 окт. 2013, в 10:01

Источник

0

Что вы пробовали? После того, как вы поместили элемент изображения в DOM и он загрузился, в чем проблема, вы просто проверяете его ширину и высоту ...
CBroe 04 окт. 2013, в 07:41
0

@CBroe Хорошо, я попробовал положить maxHeight: 1100, maxWidth: 1100, но это не сработало, и это все, что я пытался, потому что я не знаю много ни о jquery, ни о javascript
ThinkkSo 04 окт. 2013, в 08:08

Теги:

php

javascript

jquery

css

1 ответ

Ещё вопросы

Что вы пробовали? После того, как вы поместили элемент изображения в DOM и он загрузился, в чем проблема, вы просто проверяете его ширину и высоту ...
@CBroe Хорошо, я попробовал положить maxHeight: 1100, maxWidth: 1100, но это не сработало, и это все, что я пытался, потому что я не знаю много ни о jquery, ни о javascript

Rayon · Accepted Answer · 2013-10-04T06-40-00.000Z

просто замените свой скрипт.js на

function setInfo(i, e) {
    $('#x').val(e.x1);
    $('#y').val(e.y1);
    $('#w').val(e.width);
    $('#h').val(e.height);
}
$(document).ready(function () {
    var p = $("#uploadPreview");
    // prepare instant preview
    $("#uploadImage").change(function () {
        var that=this;
        // fadeOut or hide preview
        p.fadeOut();
        // prepare HTML5 FileReader
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
        oFReader.onload = function (oFREvent) {
            var image = new Image();
            image.src = oFREvent.target.result;
            image.onload = function () {
                if ((this.width > 400) && (this.height)) {
                    that.value="";
                    alert("choose another file");
                }
                else {
                    p.attr('src', oFREvent.target.result).fadeIn();
                }
                // access image size here & do further implementation
            };
        };
    });
    // implement imgAreaSelect plug in (http://odyniec.net/projects/imgareaselect/)
    $('img#uploadPreview').imgAreaSelect({
        // set crop ratio (optional)
        aspectRatio: '1:1',
        onSelectEnd: setInfo,
        maxHeight: 100,
        maxWidth: 100
    });
});

Это поможет..