Ich verwende das Blueimp jQuery-Plugin zum Hochladen von Dateien zum Hochladen von Dateien.
Ich hatte kein Problem beim Hochladen aber die Option maxFileSize
und acceptFileTypes
funktioniert nicht.
Das ist mein Code:
$(document).ready(function () {
'use strict';
$('#fileupload').fileupload({
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000,
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p style="color: green;">' + file.name + '<i class="elusive-ok" style="padding-left:10px;"/> - Type: ' + file.type + ' - Size: ' + file.size + ' byte</p>')
.appendTo('#div_files');
});
},
fail: function (e, data) {
$.each(data.messages, function (index, error) {
$('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>')
.appendTo('#div_files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%');
}
});
});
Antworten:
Hatte das gleiche Problem und der Blueimp-Typ sagt " maxFileSize und acceptFileTypes werden nur von der UI-Version unterstützt " und hat einen (defekten) Link bereitgestellt, um die Methoden _validate und _hasError einzubeziehen.
Ohne zu wissen, wie man diese Methoden einbindet, ohne das Skript durcheinander zu bringen, habe ich diese kleine Funktion geschrieben. Es scheint für mich zu funktionieren.
Fügen Sie dies einfach hinzu
zu Beginn der .fileupload-Optionen, wie in Ihrem Code hier gezeigt
Sie werden feststellen, dass ich dort auch eine Dateigrößenfunktion hinzugefügt habe, da dies auch nur in der UI-Version funktioniert.
Aktualisiert, um das von @lopsided vorgeschlagene Problem der Vergangenheit zu erhalten: Hinzugefügt
data.originalFiles[0]['type'].length
unddata.originalFiles[0]['size'].length
in den Abfragen, um sicherzustellen, dass sie vorhanden sind und nicht zuerst leer sind, bevor auf Fehler getestet wird. Wenn sie nicht vorhanden sind, wird kein Fehler angezeigt und es wird nur auf Ihren serverseitigen Fehlertest zurückgegriffen.quelle
data.originalFiles[0]['type']
beim Hochladen von einem Browser, der die Datei-API nicht unterstützt , leer ist. Dies war auf meinem Android-Handy der Fall. Ich habe es übergeben, wenn dieser Wert nicht verfügbar ist, und dann auf die serverseitige Überprüfung des MIME-Typs zurückgegriffen. Sonst kommt man nie über dieacceptFileTypes.test
Linie hinausSie sollten jquery.fileupload-process.js und jquery.fileupload-validate.js einschließen , damit es funktioniert.
quelle
Wie in einer früheren Antwort vorgeschlagen, müssen wir zwei zusätzliche Dateien einfügen -
jquery.fileupload-process.js
und dannjquery.fileupload-validate.js
aber , wie ich einige zusätzliche Ajax - Aufrufe ausführen müssen , während das Hinzufügen einer Datei, ich zum melde michfileuploadadd
Ereignis diese Anrufe durchzuführen. In Bezug auf eine solche Verwendung schlug der Autor dieses Plugins Folgendes vorMit der Kombination der beiden vorgeschlagenen Optionen funktioniert der folgende Code perfekt für mich
quelle
Uncaught Error: cannot call methods on fileupload prior to initialization; attempted to call method 'process'
.fileupload()
nicht zum richtigen Zeitpunkt angerufen wurde. Ohne den Code zu sehen, ist es fast unmöglich zu diagnostizieren. Ich schlage vor, eine neue Frage zu öffnen und den entsprechenden Code zu veröffentlichen, vielleicht als jsfiddle.$('#fileupload').fileupload({ blah : blah, blah : blah, }) $fileInput.on('fileuploadadd', function(evt, data) { var $this = $(this); var validation = data.process(function () { return $this.fileupload('process', data); }); ...
Es war offensichtlich, als ich darüber nachdachte, aber ich versuchte, Logik in etwas zu definieren, das ich noch nicht fertig deklariert hatte.Das funktioniert bei mir in Firefox
quelle
Öffnen Sie die Datei mit dem Namen "jquery.fileupload-ui.js". Der Code wird folgendermaßen angezeigt:
Fügen Sie einfach einen Zeilencode hinzu - das neue Attribut "acceptFileTypes" wie folgt:
Jetzt wirst du sehen, dass alles in Ordnung ist! ~ Du nimmst das Attribut einfach an eine falsche Stelle.
quelle
Wenn Sie alle JS-Plugins importiert haben und in der richtigen Reihenfolge, aber immer noch Probleme haben, scheint es, dass die Angabe Ihres eigenen "Add" -Handlers den des Plugins * -validate.js nerfs, der normalerweise ausgelöst wird Deaktivieren Sie die gesamte Validierung, indem Sie data.process () aufrufen. Um dies zu beheben, führen Sie in Ihrem Event-Handler "Hinzufügen" einfach Folgendes aus:
quelle
Geprüftes / gültiges Beispiel für:
$.grep()
Dateien hochladen - um fehlerhafte Dateien aus dem Array zu entfernenimage
undaudio
Formatnew RegExp()
Hinweis:
acceptFileTypes.test()
- Überprüfen Sie die MIME-Typen auf Adio-Dateien, wie.mp3
sie sein werdenaudio/mpeg
- nicht nur auf die Erweiterung. Für alle Blueimp-Optionen: https://github.com/blueimp/jQuery-File-Upload/wiki/Optionsquelle
Nur ein Beispiel für einen Ereignishandler für Ereignis hinzufügen. Angenommen, die Option singleFileUploads ist aktiviert (dies ist die Standardeinstellung). Lesen Sie mehr jQuery File Upload-Dokumentation zum Binden mit dem Ereignis add / fileuploadadd. Innerhalb der Schleife können Sie beide vars this oder file verwenden . Ein Beispiel für das Abrufen der size-Eigenschaft: this ['size'] oder file.size .
quelle
Dies funktionierte für mich in Chrome, jquery.fileupload.js Version ist 5.42.3
quelle
quelle
Für den Fall, dass jemand nach allgemein unterstützten Formaten vom Server sucht
quelle
Sie können auch eine zusätzliche Funktion verwenden wie:
quelle
Sie sollten jquery.fileupload-process.js und jquery.fileupload-validate.js einschließen , damit es funktioniert.
Dann...
Der Prozessfehler- Rückruf wird gestartet, nachdem eine Validierung fehlgeschlagen ist.
quelle
Einfacher wäre es, etwas zu tun, wie unten angegeben.
quelle
Wenn Sie mehrere Dateien haben, verwenden Sie eine Schleife, um jedes Dateiformat zu überprüfen
quelle