JavaScript多圖片上傳驗證不起作用

我需要你的幫助。我的腳本在發送表單之前驗證圖像分辨率。JavaScript多圖片上傳驗證不起作用

問題是，當腳本應該停止，因爲一張或多張照片大於最大分辨率。這沒有發生。

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/

來源

2017-01-12 Tomasz Fiszerowicz

這是因爲

圖片加載是異步

圖片加載需要時間，但瀏覽器不會暫停你的腳本將繼續運行下面的代碼。爲簡單起見，拋開你的代碼假設我有這個

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

由於加載圖像總是需要一些有限的時間，您總是會看到「hello」在「圖像加載」之前被警告！

現在你大概可以猜到問題出在哪裏，當你的for循環完成了所有的迭代時，即使第一個圖像完成加載直到那個時間，所以err爲0因此沒有錯誤消息。

如何解決？您可以從各種解決方案的選擇 - 回調，承諾，櫃檯etc.Assuming這是一個簡單的應用程序下面我用計數器來解決

<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）如果是的話，所有的圖像現在完成運行您的支票

來源

2017-01-12 18:08:47 Viney

JavaScript多圖片上傳驗證不起作用

回答

相關問題