Question

在一个上传脚本中，我想检查图像的尺寸。如果这些尺寸很小，则不应显示预览图像。遗憾的是，var无法正常工作。

任何人都可以帮助我，如果pic_width小于720，则变量var_error的值为1。

谢谢

var fileInput   = document.querySelector('#file');
var preview     = document.getElementById('preview');

fileInput.addEventListener('change', function(e) {
var var_error = 0;

preview.onload = function() {
    var pic_width = this.naturalWidth; 
    var pic_height = this.naturalHeight;

    if(pic_width < 720) {
        $('.contest_upload_error').fadeIn();
        $('.contest_upload_error').replaceWith('Falsche Bildgrösse (Mindestgrösse 1080px x 720px)');
        document.var_error = 1;
    }

    window.URL.revokeObjectURL(this.src);
};

if(var_error == 0) {
    var url = URL.createObjectURL(e.target.files[0]);
    preview.setAttribute('src', url);
    }
}, false);

Answer 1

我认为以下内容可能更适合您。

var fileInput = document.querySelector('#file');
var preview = document.getElementById('preview');

fileInput.addEventListener('change', function(event) {
    var e = event;
    preview.onload = function() {
        var pic_width = this.naturalWidth,
            pic_height = this.naturalHeight;

        if (pic_width < 720) {
            $('.contest_upload_error')
                .fadeIn();
                .replaceWith('Falsche Bildgrösse (Mindestgrösse 1080px x 720px)');
            this.setAttribute('src', URL.createObjectURL(e.target.files[0]));
        }

        window.URL.revokeObjectURL(this.src);
    };
});

注释：

我将change事件处理程序的参数event保存为var e，因此我们可以在下一个函数中使用它。
我将if(var_error == 0)部分移到了load事件处理程序的内部。原来它所在的位置是错误的，因为preview.onload()是异步的，将在if(var_error==0)之后被调用，因此脚本中的var_error仍为0。
我现在在var_error的{{1}}条件语句中执行错误检查，因此我删除了变量preview.onload()。

其他说明：

您在其中混合了jQuery和Javascript选择器。在顶部，您使用Javascript选择元素，在if(pic_width < 720)事件处理程序中，您使用jQuery选择元素。

addEventListener中的变量不起作用

1 个答案: