Question

我正在编写一个简单的处理程序，在上传之前显示图像预览。这是我的示例代码：

function subscribeImageShower() {
    $('input[type="file"][data-image-show]')
        .each(function() {
            var $input = $(this);
            var $img = $($input.data('image-show'));
            var selectCallback = window[$input.data('image-selected')];
            var unselectCallback = window[$input.data('image-unselected')];

            $(this)
                .on('change reset',
                    function() {
                        if (this.files && this.files[0]) {
                            var reader = new FileReader();
                            reader.onload = function(event) {
                                $img.attr('src', event.target.result);
                                $img.show();

                                if (selectCallback) {
                                    $img.one('load', selectCallback);
                                }
                            };
                            reader.readAsDataURL(this.files[0]);
                        } else {
                            $img.removeAttr('src');
                            $img.hide();
                            if (unselectCallback) {
                                unselectCallback($img[0]);
                            }
                        }
                    });
        });
}

标记：

<div class="modal-body">
    <div id="logoCanvasDiv">
        <img id="logoSampleImg" width="350" style="position: absolute;"/>
        <canvas id="logoCanvas" width="350" style="border: thick; position: absolute"></canvas>
    </div>
    <div>
        <input type="file" name="modelFile" data-image-show="#logoSampleImg" data-image-selected="onLogoSelected" data-image-unselected="onLogoUnselected"/>
        <input type="hidden" name="objectId" value="@Model.PageObject.Id" hidden />
    </div>
</div>

在选择回调中，我想获得图像宽度和高度：

function onLogoSelected(event) {
   var img = event.target;
   alert('jQuery height = ' + $(img).height());
   alert('DOM height = ' + img.height);
}

对于下面示例中宽度为800x600的图片，我分别得到0和600。但过了一段时间后，我得到了实际的图像尺寸 - 350x263。

为什么我收到这样的无效信息？如何在完全加载后获得图像大小？我订阅了load活动，但似乎没有用。

如何重现：选择一个文件 - 它已正确加载。取消选择文件。然后再次选择它。现在height无效。

Answer 1

我找到了答案，我没有发布整个回调文字，这是一个问题：

function onLogoSelected(event) {
    var img = event.target;
    console.log(img.height);
    $('#logoCanvasDiv')
        .css({
            'width': img.width,
            'height': img.height,
            'margin-bottom': 10,
            'position': 'relative'
        })
        .show();
};

function onLogoUnselected() {
    $('#logoCanvasDiv').hide();
};

父图像在加载图像时被隐藏，这就是它将高度设置为0的原因。

解决方案：只需确保在加载图片时所有父元素都可见。

无法获得图像高度，而是获得自然高度

1 个答案: