jQuery Validation Zusätzliche Verfahren zur Überprüfung der Bildbreite und -höhe: Fehlermeldung wird immer angezeigt

Question

ich implementiert nur ein jQuery Validation Zusätzlichen Verfahren zur Herstellung einer minimale Bildbreite und -höhe Überprüfung, hier ist der Code:

$.validator.addMethod('imagedim', function(value, element, params) { 
    // optional element 
    if (this.optional(element)) { 
     return true; 
    } 

    var _URL = window.URL; 
    var img; 
    if ((el = element.files[0])) { 
    img = new Image(); 
    img.src = _URL.createObjectURL(el); 
    img.onload = function() { 
     if (this.width < params[0] || this.height < params[1]) { 
     console.log("Width:" + this.width + ", Height: " + this.height); 
     return false; 
     } else { 
     return true; 
     } 
    }; 
    } 
}, ("Please upload images bigger than {0}x{1}")); 

Das Problem ist, dass die Fehlermeldung für jede Bildgröße angezeigt wird, scheint es immer false zurückzugeben.

Here is a fiddle zeigt das Verhalten: Es spielt keine Rolle, wenn Sie versuchen, kleine, große oder große Bilder hochzuladen, wird die Fehlermeldung immer angezeigt.

Ich bin kein Experte in JS und ich bin sicher, dass ich in etwas falsch bin, aber ich can'0t sehen, wo ...

Danke

Answer 1

ich gleiches Problem hatte, während Dimension Überprüfung Bild als Bild laden ist asynchron. "IMG load Funktion wird nur ausgeführt, nachdem Ihr Bild vollständig vom Browser geladen wurde und da seine asynchrone Funktion nicht auf die Ausführung wartet"

Ich habe folgenden Ansatz verwendet. Hoffe es wird helfen.

Sets ein zusätzliches Attribut in Image-Tag, während auf Änderung der Datei wie unter

$('input[type=file]').on('change',function(){ 
    element = $(this); 
    var files = this.files; 
    var _URL = window.URL || window.webkitURL; 
    var image, file; 
    image = new Image(); 
    image.src = _URL.createObjectURL(files[0]); 
     image.onload = function() { 
      element.attr('uploadWidth',this.width); 
      element.attr('uploadHeigth',this.width); 
     } 
    }); 

und jetzt Sie Ihre Funktion unter

$.validator.addMethod('checkDim', function (value, element, param) {  
    var image = new Image(); 
    var file = element.files[0]; 
    var _URL = window.URL || window.webkitURL; 
    image.src = _URL.createObjectURL(file); 
     if(element.uploadWidth== param[0] element.uploadHeigth== param[1]){ 
      return true; 
     } 
     else{    
      return false; 
     } 

}, 'Image dimension must be as specified');