Validieren von Bilddimensionen mit dem jQuery-Plugin

Question

Ich habe ein Formular, in dem die Validierung in jQuerys Validierungs-Plugin erfolgt. Mein Formular enthält zwei Elemente, einen Eingabetyp = Datei und eine Übergabeschaltfläche. Der Benutzer wählt ein Bild aus, und wenn dieses Bild weniger als 500 px ist, wird es nicht akzeptiert und eine Fehlermeldung sollte angezeigt werden. Ich habe eine neue Methode für diese Breite, aber es funktioniert nicht aus irgendeinem Grund. Die Fehlermeldung wird nicht angezeigt, wenn ich versuche, ein Bild mit weniger als 500 Pixeln zu senden. Hier ist meine jsfiddle.

HTML

<form class="some_form" enctype="multipart/form-data" method="post" action=""> 
    <input type="file" name="photo" id="photoInput" /> 
    <input type="submit"> 
</form> 

jQuery

$.validator.addMethod('width', function(value, element) { 
    if ($(element).data('width')) { 
    return $(element).data('width') >= 500; 
    } 

    return true; 
}, 'Image needs to be wider than 500px'); 

$(".some_form").validate({ 
    rules: { 
    photo: { 
     required: true, 
     width: 500 
    } 

    }, 

    messages: { 
    photo: { 
     required: "You must insert an image", 
     width: "Your image's width must be greater than 500px" 
    }, 
    } 

}); 

Answer 1

Sie können die Bilddatei in einem <img> Element laden, und dann die Breite dieses Elements erhalten.

---

Zuerst ein Containerelement zu Ihrem HTML fügen Sie das <img> Element zu halten:

<form class="some_form" enctype="multipart/form-data" method="post" action=""> 
    <input type="file" name="photo" id="photoInput" /> 
    <input type="submit"> 
</form> 
<div id="imgContainer"></div> 

---

Als nächstes definieren Sie eine benutzerdefinierte Validator-Methode:

$.validator.addMethod('minImageWidth', function(value, element, minWidth) { 
    return ($(element).data('imageWidth') || 0) > minWidth; 
}, function(minWidth, element) { 
    var imageWidth = $(element).data('imageWidth'); 
    return (imageWidth) 
     ? ("Your image's width must be greater than " + minWidth + "px") 
     : "Selected file is not an image."; 
}); 

Anmerkungen:

1. Wie Sie sehen können, erwartet die Methode, dass sie die Bildbreite erhalten kann, indem sie das Dateieingabeelement .data('imageWidth') aufruft. Wir werden diesen Wert im folgenden Code einstellen.
2. Die Methode geht außerdem davon aus, dass die ausgewählte Datei kein Bild ist, wenn .data('imageWidth')undefined zurückgibt.

---

Sie können nun die minImageWidth Methode wie folgt verwenden:

var validator = $('.some_form').validate({ 
    rules: { 
    photo: { 
     required: true, 
     minImageWidth: 500 
    } 
    }, 
    messages: { 
    photo: { 
     required: "You must insert an image" 
    }, 
    } 
}); 

---

Schließlich fügen eine Change-Ereignishandler für die Dateieingabe, die das <img> Element erstellt und fügt sie der Kontainer. Außerdem wird der Wert .data('imageWidth') für das Dateieingabeelement festgelegt.

var $submitBtn = $('.some_form').find('input:submit'), 
    $photoInput = $('#photoInput'), 
    $imgContainer = $('#imgContainer'); 

$('#photoInput').change(function() { 
    $photoInput.removeData('imageWidth'); 
    $imgContainer.hide().empty(); 

    var file = this.files[0]; 

    if (file.type.match(/image\/.*/)) { 
    $submitBtn.attr('disabled', true); 

    var reader = new FileReader(); 

    reader.onload = function() { 
     var $img = $('<img />').attr({ src: reader.result }); 

     $img.on('load', function() { 
     $imgContainer.append($img).show(); 
     var imageWidth = $img.width(); 
     $photoInput.data('imageWidth', imageWidth); 
     if (imageWidth < 500) { 
      $imgContainer.hide(); 
     } else { 
      $img.css({ width: '400px', height: '200px' }); 
     } 
     $submitBtn.attr('disabled', false); 

     validator.element($photoInput); 
     }); 
    } 

    reader.readAsDataURL(file); 
    } else { 
    validator.element($photoInput); 
    } 
}); 

Anmerkungen:

1. Wenn das Bild geladen ist, wird seine Breite als .data('imageWidth') Wert auf dem Dateieingabeelement gesetzt.
2. Während das Bild geladen wird, ist die Senden-Schaltfläche deaktiviert, sodass der Benutzer das Formular nicht senden kann.
3. Die Validierung wird unmittelbar nach dem Laden des Bildes durchgeführt. Das heißt, der Benutzer muss nicht auf die Senden-Schaltfläche klicken, damit die Fehlermeldung angezeigt wird. Dies wird durch den Aufruf an validator.element() erreicht.
4. Sie können die Breite des Elements erst erhalten, wenn es dem DOM hinzugefügt wird.Es muss auch sichtbar sein, aber der Code oben zeigt, wie es direkt danach versteckt werden kann, falls gewünscht.

jsfiddle

---

Referenzen:

• https://developer.mozilla.org/en-US/docs/Web/API/FileReader
• http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api
• jquery validation plugin, how to add multiple custom messages in custom method