Senden multipart/formdata mit jQuery.ajax
Ich habe ein problem beim senden einer Datei an eine serverseitige PHP-Skript mithilfe von jQuery-ajax-Funktion.
Es ist möglich, um die Datei-Liste mit $('#fileinput').attr('files')
aber wie ist es möglich, zum senden dieser Daten an den server? Das resultierende array ($_POST
) auf der serverside php-Skript ist 0 ( NULL
), wenn das Datei-input.
Ich weiß, es ist möglich (obwohl ich nicht alle jQuery-Lösungen, bis jetzt, nur Prototye-code (http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html)).
Diese scheint relativ neu zu sein, also bitte nicht zu erwähnen, Datei-upload unmöglich wäre, über XHR/Ajax, denn es ist definitiv Arbeit.
Ich brauche die Funktionalität von Safari 5, FF und Chrome wäre schön, aber nicht zwingend.
Mein code 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);
}
});
angeblich können Sie ein polyfill mit Flash zu unterstützen, die gleiche API. Check out github.com/Modernizr/Modernizr/wiki/... für mehr info.
Möglich duplicate.
Sie können
$(':file')
auswählen, um alle input-Dateien. Es ist nur ein bisschen einfacher.Die Antwort gepostet wurde, fünf Jahre nachdem diese Frage beantwortet wurde. Bitte nicht den troll ähnliche Fragen nur zur Förderung Ihrer eigenen Antworten.
InformationsquelleAutor zoku | 2011-03-22
Du musst angemeldet sein, um einen Kommentar abzugeben.
Beginnend mit Safari 5/Firefox 4, es ist am einfachsten zu verwenden, die
FormData
Klasse:So, jetzt haben Sie eine
FormData
Objekt, bereit, gesendet werden, zusammen mit dem XMLHttpRequest-Objekt.Ist es unerlässlich, dass Sie die
contentType
optionfalse
zwingen jQuery nicht hinzufügenContent-Type
header, da sonst die Grenze saite fehlt.Auch, müssen Sie verlassen die
processData
- flag auf false, ansonsten, jQuery wird versuchen, konvertieren Sie IhreFormData
in einen string, der wird scheitern.Können Sie jetzt rufen Sie die Datei in PHP mit:
(Es ist nur eine Datei,
file-0
, es sei denn, Sie angegeben diemultiple
- Attribut auf die Datei-Eingabe, in dem Fall die Zahl erhöht sich mit jeder Datei.)Mit der FormData-emulation für ältere Browser
Erstellen FormData aus einer vorhandenen form
Statt manuell Durchlaufen der Dateien, dem FormData-Objekt können auch erstellt werden mit dem Inhalt einer bestehenden Formular-Objekt:
Verwenden Sie eine native PHP-array anstelle eines Zählers
Einfach einen Namen für Ihre Datei-Elemente der gleichen und das Ende des namens in Klammern:
$_FILES['file']
wird dann ein array, das Datei-upload-Felder für jede Datei hochgeladen. Ich eigentlich empfehlen dies über meine erste Lösung, da es einfacher zu Durchlaufen.data.fake
und legen Sie diecontentType
Eigenschaft manuell als auch übergeordnete xhr verwendensendAsBinary()
.Sie sind also weder mit
jQuery
noch dieFormData
Klasse und Sie Fragen mich im Zusammenhang mit einer Frage, die spezifisch für jQuery und eine Antwort spezifisch für die Verwendung von FormData? Tut mir Leid aber ich glaube nicht, ich kann dir da helfen...Dies nutzt
application/x-www-form-urlencoded
. Gibt es eine Möglichkeit zu nutzenmultipart/form-data
statt?Nein, es nutzt
multipart/form-data
. Mitapplication/x-www-form-urlencoded
würde nicht funktionieren.Es ist nur dokumentiert im code, fürchte ich.
InformationsquelleAutor Raphael Schweikert
Wollte nur hinzufügen, ein wenig an Raphael ' s Super Antwort. Hier ist, wie man PHP zu erzeugen die gleichen
$_FILES
, unabhängig davon, ob Sie JavaScript verwenden, um zu senden.HTML-Formular:
PHP erzeugt diese
$_FILES
, die bei der Abgabe ohne JavaScript:Wenn Sie progressive enhancement, mit Raphael JS, die zum senden der Dateien...
... das ist, was PHP ist
$_FILES
array aussieht, nach der Verwendung von JavaScript-submit:Dass eine schöne Reihe, und eigentlich das, was einige Menschen zu verwandeln
$_FILES
in, aber ich finde es ist hilfreich, mit den gleichen$_FILES
, unabhängig davon, ob JavaScript wurde verwendet, um die Einreichen. So, hier sind ein paar kleine änderungen an der JS:(14. April 2017 edit: ich entfernte das form-element aus dem Konstruktor von FormData() -- fest, dass dieser code in Safari.)
Dass code, der zwei Dinge tut.
input
name-Attribut automatisch, so dass die HTML-wartbarer. Nun, solangeform
hat die Klasse putImages, alles andere wird automatisch erledigt. Das heißt, dieinput
müssen keine speziellen Namen.Dieser Veränderung, die übermittlung, die mit JavaScript erzeugt nun genau die gleichen
$_FILES
array als die übermittlung mit einfachem HTML.InformationsquelleAutor ajmicek
Ich baute Sie diese Funktion, basierend auf einige Informationen, die ich lese.
Verwenden Sie es wie mit
.serialize()
, stattdessen setzen Sie einfach.serializefiles();
.Die Arbeit hier in meinen tests.
das funktioniert für mich sehr gut. abrufen von Daten mit
var data = $("#avatar-form").serializefiles();
senden diese per ajax Daten, parameter und Analyse mit express gewaltig:form.parse(req, function(err, fields, files){
vielen Dank für dieses code-snippet 🙂das war tricky (y) 😀 loved it
InformationsquelleAutor evandro777
Blick auf meinen code, es macht den job für mich
InformationsquelleAutor Asad Malik
Wenn Ihre form definiert ist, die in Ihrer HTML -, es ist leichter zu passieren, die form in den Konstruktor als es zu Durchlaufen, und fügen Sie Bilder hinzu.
InformationsquelleAutor Devin Venable
Devin Venable ' s Antwort war nahe an dem, was ich wollte, aber ich wollte, dass würde die Arbeit auf mehrere Formulare, und verwenden Sie die Aktion, die bereits im Formular angegeben, so dass jede Datei gehen würde an der richtigen Stelle.
Wollte ich auch die Verwendung von jQuery auf () - Methode so konnte ich vermeiden, mit .ready().
Dass hat mich zu dieser:
(ersetzen Sie formSelector mit deinem jQuery-Selektor)
InformationsquelleAutor Karl Henselin
Dem FormData-Klasse funktioniert, aber im iOS-Safari (auf dem iPhone zumindest) ich war nicht in der Lage zu verwenden, Raphael Schweikert, der die Lösung so wie Sie ist.
Mozilla Dev hat eine schöne Seite auf die Manipulation FormData-Objekte.
So fügen Sie einem leeren Formular irgendwo auf der Seite, die Angabe enctype:
Erstellen Sie dann FormData-Objekt als:
und gehen Sie wie in Raphael ' s code.
InformationsquelleAutor topkara
Alle oben genannten Lösungen sind gut aussieht und elegant, aber das FormData () - Objekt erwartet keine parameter, sondern verwenden Sie die append() nach dem instanziieren, wie man Sie von oben schrieb:
formData.append(val.name, val.Wert);
InformationsquelleAutor szatti1489
Einer gotcha-ich lief in heute denke ich, hinzuweisen ist im Zusammenhang mit diesem problem: wenn Sie die url für den ajax-Aufruf umgeleitet, die dann den header für content-type: 'multipart/form-data' verloren gehen kann.
Zum Beispiel, ich war Entsendung auf http://server.com/context?param=x
In den Netzwerk-tab von Chrome sah ich die korrekte multipart-header für diese Anfrage dann aber ein 302-redirect auf http://server.com/context/?param=x (beachten Sie den slash nach Kontext)
Während der Umleitung die multipart-header verloren war. Gewährleisten Anforderungen werden nicht umgeleitet wird, wenn diese Lösungen nicht für Sie arbeiten.
InformationsquelleAutor james
Älteren Versionen von IE nicht unterstützt FormData ( Voll-browser support-Liste für FormData ist hier: https://developer.mozilla.org/en-US/docs/Web/API/FormData).
Entweder können Sie ein jquery-plugin (Für ex, http://malsup.com/jquery/form/#code-samples ) oder Sie können IFrame-basierte Lösung für den post multipart form Daten über ajax: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
InformationsquelleAutor sudip
Nova Tage, die Sie nicht brauchen, auch jQuery:) fetch API-Unterstützung Tabelle
fetch
siehe Kompatibilität: developer.mozilla.org/en-US/docs/Web/API/...ja, ich habe einen ähnlichen link in meiner Antwort))
Oops. Wie kann ich verpassen, dass
:-|
InformationsquelleAutor Alex Nikulin
InformationsquelleAutor user1909226