Ich habe ein Problem beim Senden einer Datei an ein serverseitiges PHP-Skript mit der Ajax-Funktion von jQuery. Es ist möglich, die Dateiliste mit zu erhalten, $('#fileinput').attr('files')
aber wie ist es möglich, diese Daten an den Server zu senden? Das resultierende Array ( $_POST
) im serverseitigen PHP-Skript ist 0 ( NULL
), wenn die Dateieingabe verwendet wird.
Ich weiß, dass dies möglich ist (obwohl ich bisher keine jQuery-Lösungen gefunden habe, nur Prototye-Code ( http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html )) ).
Dies scheint relativ neu zu sein, bitte erwähnen Sie nicht, dass das Hochladen von Dateien über XHR / Ajax unmöglich wäre, da es definitiv funktioniert.
Ich brauche die Funktionalität in Safari 5, FF und Chrome wäre nett, aber nicht unbedingt erforderlich.
Mein Code für jetzt ist:
$.ajax({
url: 'php/upload.php',
data: $('#file').attr('files'),
cache: false,
contentType: 'multipart/form-data',
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
$(':file')
Sie alle Eingabedateien auswählen. Es ist nur ein bisschen einfacher.Antworten:
Ab Safari 5 / Firefox 4 ist es am einfachsten, die
FormData
Klasse zu verwenden:Jetzt haben Sie ein
FormData
Objekt, das zusammen mit XMLHttpRequest gesendet werden kann.Es ist unbedingt erforderlich, dass Sie die
contentType
Option auf setzenfalse
und jQuery dazu zwingen, keinenContent-Type
Header für Sie hinzuzufügen. Andernfalls fehlt die Begrenzungszeichenfolge. Außerdem müssen Sie dasprocessData
Flag auf false setzen, andernfalls versucht jQuery, Ihr FlagFormData
in einen String umzuwandeln , was fehlschlägt.Sie können die Datei jetzt in PHP abrufen mit:
(Es gibt nur eine Datei, es
file-0
sei denn, Sie haben dasmultiple
Attribut in Ihrer Dateieingabe angegeben. In diesem Fall werden die Zahlen mit jeder Datei erhöht.)Verwenden der FormData-Emulation für ältere Browser
Erstellen Sie FormData aus einem vorhandenen Formular
Anstatt die Dateien manuell zu iterieren, kann das FormData-Objekt auch mit dem Inhalt eines vorhandenen Formularobjekts erstellt werden:
Verwenden Sie ein natives PHP-Array anstelle eines Zählers
Benennen Sie einfach Ihre Dateielemente gleich und beenden Sie den Namen in Klammern:
$_FILES['file']
wird dann ein Array sein, das die Felder zum Hochladen von Dateien für jede hochgeladene Datei enthält. Ich empfehle dies gegenüber meiner ursprünglichen Lösung, da es einfacher ist, es zu wiederholen.quelle
data.fake
diecontentType
Eigenschaft manuell zu suchen und festzulegen sowie das zu verwendende xhr zu überschreibensendAsBinary()
.jQuery
dieFormData
Klasse noch fragen Sie mich im Zusammenhang mit einer für jQuery spezifischen Frage und einer für die Verwendung von FormData spezifischen Antwort? Es tut mir leid, aber ich glaube nicht, dass ich Ihnen dort helfen kann ...application/x-www-form-urlencoded
. Gibt es eine Möglichkeit,multipart/form-data
stattdessen zu verwenden ?multipart/form-data
. Verwendenapplication/x-www-form-urlencoded
würde nicht funktionieren.Ich wollte nur ein bisschen zu Raphaels großartiger Antwort hinzufügen. Hier erfahren Sie, wie Sie PHP dazu bringen, dasselbe zu produzieren
$_FILES
, unabhängig davon, ob Sie JavaScript zum Senden verwenden.HTML-Formular:
PHP erzeugt dies
$_FILES
, wenn es ohne JavaScript eingereicht wird:Wenn Sie eine progressive Verbesserung durchführen, verwenden Sie Raphaels JS, um die Dateien zu senden ...
... so
$_FILES
sieht das PHP- Array aus, nachdem dieses JavaScript zum Senden verwendet wurde:Das ist ein schönes Array und tatsächlich das,
$_FILES
in das sich einige Leute verwandeln , aber ich finde es nützlich, mit demselben zu arbeiten$_FILES
, unabhängig davon, ob JavaScript zum Senden verwendet wurde. Hier sind einige geringfügige Änderungen an der JS:(Bearbeitung vom 14. April 2017: Ich habe das Formularelement aus dem Konstruktor von FormData () entfernt - das diesen Code in Safari behoben hat.)
Dieser Code macht zwei Dinge.
input
Namensattribut automatisch ab, wodurch der HTML-Code besser gewartet werden kann. Solangeform
die Klasse putImages vorhanden ist, wird alles andere automatisch erledigt. Das heißt, dieinput
müssen keinen speziellen Namen haben.Mit diesen Änderungen erzeugt das Senden mit JavaScript jetzt genau das gleiche
$_FILES
Array wie das Senden mit einfachem HTML.quelle
Schauen Sie sich meinen Code an, er erledigt den Job für mich
quelle
Ich habe diese Funktion gerade basierend auf einigen Informationen erstellt, die ich gelesen habe.
Verwenden Sie es wie verwenden
.serialize()
, stattdessen einfach setzen.serializefiles();
.Ich arbeite hier in meinen Tests.
quelle
var data = $("#avatar-form").serializefiles();
Senden über Ajax-Datenparameter und Analysieren mit Express Formidable:form.parse(req, function(err, fields, files){
Vielen Dank für das Code-Snippet :)Wenn Ihr Formular in Ihrem HTML-Code definiert ist, ist es einfacher, das Formular an den Konstruktor zu übergeben, als Bilder zu iterieren und hinzuzufügen.
quelle
Die Antwort von Devin Venable war nah an dem, was ich wollte, aber ich wollte eine, die auf mehreren Formularen funktioniert und die bereits im Formular angegebene Aktion verwendet, damit jede Datei an den richtigen Ort verschoben wird.
Ich wollte auch die on () -Methode von jQuery verwenden, um die Verwendung von .ready () zu vermeiden.
Das brachte mich dazu: (Ersetzen Sie formSelector durch Ihren jQuery-Selektor)
quelle
Heutzutage brauchen Sie nicht einmal jQuery :) Fetch API Support-Tabelle
quelle
fetch
siehe Kompatibilität: developer.mozilla.org/en-US/docs/Web/API/…:-|
Die FormData-Klasse funktioniert, aber in iOS Safari (zumindest auf dem iPhone) konnte ich die Lösung von Raphael Schweikert nicht so verwenden, wie sie ist.
Mozilla Dev hat eine schöne Seite zum Bearbeiten von FormData-Objekten .
Fügen Sie also irgendwo auf Ihrer Seite ein leeres Formular hinzu und geben Sie den Enctype an:
Erstellen Sie dann das FormData-Objekt wie folgt:
und verfahren Sie wie in Raphaels Code .
quelle
Ein Problem, auf das ich heute gestoßen bin, ist meines Erachtens im Zusammenhang mit diesem Problem erwähnenswert: Wenn die URL für den Ajax-Aufruf umgeleitet wird, kann der Header für den Inhaltstyp "Multipart / Formulardaten" verloren gehen.
Zum Beispiel habe ich auf http://server.com/context?param=x gepostet
Auf der Registerkarte "Netzwerk" von Chrome habe ich den richtigen mehrteiligen Header für diese Anforderung gesehen, aber dann eine 302-Weiterleitung zu http://server.com/context/?param=x (beachten Sie den Schrägstrich nach dem Kontext).
Während der Umleitung ging der mehrteilige Header verloren. Stellen Sie sicher, dass Anforderungen nicht umgeleitet werden, wenn diese Lösungen für Sie nicht funktionieren.
quelle
Alle oben genannten Lösungen sehen gut und elegant aus, aber das FormData () -Objekt erwartet keinen Parameter, verwendet jedoch append (), nachdem es instanziiert wurde, wie oben beschrieben:
formData.append (val.name, val.value);
quelle
Wenn die Dateieingabe
name
ein Array und Flags angibtmultiple
und Sie das gesamteform
mit analysierenFormData
, müssenappend()
die Eingabedateien nicht iterativ ausgeführt werden.FormData
verarbeitet automatisch mehrere Dateien.Beachten Sie, dass kein reguläres
button type="button"
verwendet wird, nichttype="submit"
. Dies zeigt, dass keine Abhängigkeit von der Verwendung bestehtsubmit
, um diese Funktionalität zu erhalten.Der resultierende
$_FILES
Eintrag sieht in den Chrome-Entwicklungstools folgendermaßen aus:Hinweis: Es gibt Fälle, in denen einige Bilder beim Hochladen als einzelne Datei einwandfrei hochgeladen werden, beim Hochladen in mehreren Dateien jedoch fehlschlagen. Das Symptom ist, dass PHP-Berichte leer sind
$_POST
und$_FILES
ohne dass AJAX Fehler auslöst. Das Problem tritt bei Chrome 75.0.3770.100 und PHP 7.0 auf. Scheint nur mit 1 von mehreren Dutzend Bildern in meinem Testset zu passieren.quelle
Ältere Versionen des IE unterstützen FormData nicht (die vollständige Liste der Browserunterstützung für FormData finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/API/FormData ).
Entweder können Sie ein jquery-Plugin verwenden (z. B. http://malsup.com/jquery/form/#code-samples ) oder Sie können eine IFrame- basierte Lösung verwenden, um mehrteilige Formulardaten über ajax: https: // developer zu veröffentlichen. mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
quelle
PHP
jQuery und Form HTML
quelle
quelle