Получить ширину и высоту из входного файла

Question

Мне нужно получить ширину и высоту изображения, которое я выбрал из входного файла. Я пытался использовать это, но не работает.

HTML

<form id="formimg">
    <label>Selecciona una imagen</label>
    <input type="file" name="txtFile" id="txtFile" accept="image/*">
</form>

JS

var _URL = window.URL || window.webkitURL;
    $("#txtFile").change(function(e) {

        var image, file;

        if ((file = this.files[0])) {
            image = new Image();

            image.onload = function() {
                alert("La imagen es de ancho " + this.width + " y largo " + this.height);
            };

            image.src = _URL.createObjectURL(file);
        }


    });

Answer 1

Если ваш JS объявлен в разделе head вашего HTML, вы не сможете получить доступ ни к каким элементам в документе, поскольку HTML интерпретируется сверху вниз. Вы можете преодолеть это с помощью $(document).ready.

        var _URL = window.URL || window.webkitURL;
        $(document).ready(function() {
            $("#txtFile").change(function (e) {
                var image, file;

                if ((file = this.files[0])) {
                    image = new Image();

                    image.onload = function () {
                        alert("La imagen es de ancho " + this.width + " y largo " + this.height);
                    };

                    image.src = _URL.createObjectURL(file);
                }
            });
        });

В качестве альтернативы вы можете попробовать присоединить обработчик событий к полю с помощью атрибута onchange, определив функцию:

        var _URL = window.URL || window.webkitURL;
        var changeHandler = function (e) {
            var image, file;

            if ((file = e.files[0])) {
                image = new Image();

                image.onload = function () {
                    alert("La imagen es de ancho " + this.width + " y largo " + this.height);
                };

                image.src = _URL.createObjectURL(file);
            }
        }

и ваша форма:

    <form id="formimg">
        <label>Selecciona una imagen</label>
        <input type="file" name="txtFile" id="txtFile" accept="image/*" onchange="changeHandler(this)">
    </form>