Question

我需要你的帮助。我的脚本在发送表单之前验证图像分辨率

问题在于脚本应该停止，因为一张或多张照片大于最大分辨率。它没有发生。

var err正在计算错误分辨率照片的数量，但最后，我不知道为什么它始终为0。

有什么想法吗？

jQuery("form").submit( function( e ) {
                var form = this;
                e.preventDefault();

                    var photos = document.getElementById('imgInp');
                    var howmany = photos.files.length;
                    var err = 0;

                    var img = new Array();

                    for (var i = 0; i < howmany; i++) {               

                        if (photos.files[i]) {

                            img[i] = new Image();
                            img[i].src = window.URL.createObjectURL( photos.files[i] );

                            img[i].onload = function() {

                                window.URL.revokeObjectURL( this.src );

                                    if( this.width < 1281 && this.height < 1025 ) {                                                                           

                                    } else {                                           

                                        alert('Zdjęcie jest zbyt duże');
                                        err++;

                                    }
                            };

                        } else {

                        form.submit();

                        }                           

                    }

                    if(err > 0) {
                        alert('Niestety ale jedno lub więcej zdjęć, które próbujesz załadować są zbyt duże (dopuszczalna rozdzielczość maksymalna to 1280 x 1024).');
                    } else {
                        alert('Ok'); // form.submit();
                    }

            });

https://jsfiddle.net/5fv42o0e/2/

Answer 1

这是因为

图片加载是异步的

图片加载需要时间，但浏览器不会暂停你的脚本，它会继续运行下面的代码。为了简单起见，请保留代码，假设我有这个

var img = new Image();
img.onload = function(){ alert('image loaded');}
img.src = "lion.jpg";
alert('hello');

因为加载图片总是需要一些有限的时间，所以你总能看到＆＃34;你好＆＃34;在图像加载之前被警告＆＃34;总是！

现在你可以猜到问题出在哪里，当你的for循环完成它的所有迭代时，甚至第一张图像都没有加载到那时为止所以err为0因此没有错误消息。

如何解决？您可以从各种解决方案中进行选择 - 回调，承诺，计数器等。假设它是一个简单的应用程序，我使用了计数器来解决

<script>         
var err = 0;
var counter = 0;

jQuery("form").submit( function( e ) {
    var form = this;
    e.preventDefault();

    var photos = document.getElementById('imgInp');
    var howmany = photos.files.length;

    var img = new Array();
    for (var i = 0; i < howmany; i++) {               

        if (photos.files[i]) {
            img[i] = new Image();
            img[i].src = window.URL.createObjectURL( photos.files[i] );
            counter++;
            img[i].onload = function() {
                                window.URL.revokeObjectURL( this.src );
                                if( this.width < 1281 && this.height < 1025)
                                {                                                                           

                                } else {                                                                             
                                  alert('Zdjecie jest zbyt duze');
                                  err++;
                                }
                                counter--;

                                if(counter === 0 ){
                                    if(err > 0) {
                                       alert('Niestety ale jedno lub wiecej zdjec, które próbujesz zaladowac sa zbyt duze (dopuszczalna rozdzielczosc maksymalna to 1280 x 1024).');
                                     } else {
                                         alert('Ok'); // form.submit();
                                     }
                                 }

                           };
        }                         
    }


});

</script>

以下是它的工作原理：counter将跟踪有多少图像未完成，即。已为其分配了src但正在等待加载。每次分配counter时递增src并在每次加载图像时递减它（onload函数）还要检查它是否是最后一个要加载的图像（检查counter是否为0）如果是，则现在所有图像都已完成运行检查

JavaScript多图像上传验证无效

1 个答案: