Ich möchte, dass jQuery ein Feld zum Hochladen von Dateien auf jpg / jpeg, png und gif beschränkt. Ich überprüfe PHP
bereits das Backend . Ich führe meine Senden-Schaltfläche bereits über eine JavaScript
Funktion aus, sodass ich wirklich nur wissen muss, wie ich vor dem Senden oder Benachrichtigen nach den Dateitypen suchen kann.
javascript
jquery
file-upload
file-type
Anthony
quelle
quelle
$("#my_upload_form").bind("submit", function() { // above check });
$('#file_field').change(function(){// above check});
$("#my_upload_form").bind("submit", function() { // above check });
sollte jetzt mit$("#my_upload_form").submit(function() { // above check });
api.jquery.com/submit gebunden werden . Sie können auch verhindern, dass das Formular mit$("#my_upload_form").submit(function(e) { // above check e.preventDefault(); });
".jpg"
FileUpload diese Datei als Bild akzeptieren , wenn der Benutzer beispielsweise eine MS Word-Datei hinzufügen würde. Ich denke es ist nicht richtig.Für diese Aufgabe ist kein Plugin erforderlich. Hat dies aus ein paar anderen Skripten zusammengeschustert:
Der Trick dabei ist, die Upload-Schaltfläche auf deaktiviert zu setzen, bis ein gültiger Dateityp ausgewählt ist.
quelle
Sie können das Validierungs-Plugin für jQuery verwenden: http://docs.jquery.com/Plugins/Validation
Es gibt eine accept () -Regel, die genau das tut, was Sie brauchen: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension
Beachten Sie, dass die Steuerung der Dateierweiterung nicht kugelsicher ist, da sie in keiner Weise mit dem Mimetyp der Datei zusammenhängt. Sie könnten also eine PNG-Datei haben, die ein Word-Dokument ist, und eine DOC-Datei, die ein perfekt gültiges PNG-Bild ist. Also vergiss nicht, mehr Steuerelemente serverseitig zu machen;)
quelle
Für das Front-End ist es ziemlich praktisch, das Attribut ' accept ' zu setzen, wenn Sie ein Dateifeld verwenden.
Beispiel:
Ein paar wichtige Hinweise:
quelle
Sie möchten nicht lieber nach MIME suchen als nach der Ausdehnung, die der Benutzer lügt? Wenn ja, dann ist es weniger als eine Zeile:
quelle
Für meinen Fall habe ich folgende Codes verwendet:
quelle
Ich versuche ein funktionierendes Codebeispiel zu schreiben, ich teste es und alles funktioniert.
Hase ist Code:
HTML:
Javascript:
quelle
Dieser Code funktioniert einwandfrei. Das einzige Problem besteht jedoch darin, dass das Dateiformat nicht den angegebenen Optionen entspricht. Es wird eine Warnmeldung angezeigt, aber der Dateiname wird angezeigt, während er vernachlässigt werden sollte.
quelle
In diesem Beispiel können nur PNG-Bilder hochgeladen werden.
HTML
JS
quelle
quelle
Wenn Sie mit mehreren (HTML 5) Datei-Uploads zu tun haben, habe ich den oben vorgeschlagenen Kommentar genommen und ein wenig geändert:
quelle
quelle
quelle
Hier ist ein einfacher Code für die Javascript-Validierung. Nach der Validierung wird die Eingabedatei bereinigt.
quelle