Ich verwende jQuery und Ajax für meine Formulare, um Daten und Dateien zu senden, bin mir aber nicht sicher, wie ich Daten und Dateien in einem Formular senden soll?
Ich mache derzeit fast dasselbe mit beiden Methoden, aber die Art und Weise, wie die Daten in einem Array gesammelt werden, ist unterschiedlich, die Daten werden verwendet, .serialize();
aber die Dateien= new FormData($(this)[0]);
Ist es möglich, beide Methoden zu kombinieren, um Dateien und Daten über Ajax in einer Form hochladen zu können?
Daten jQuery, Ajax und HTML
$("form#data").submit(function(){
var formData = $(this).serialize();
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
<form id="data" method="post">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<button>Submit</button>
</form>
Dateien jQuery, Ajax und HTML
$("form#files").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
<form id="files" method="post" enctype="multipart/form-data">
<input name="image" type="file" />
<button>Submit</button>
</form>
Wie kann ich das oben Genannte kombinieren, um Daten und Dateien in einem Formular über Ajax zu senden?
Mein Ziel ist es, all dieses Formular in einem Post mit Ajax senden zu können. Ist das möglich?
<form id="datafiles" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<button>Submit</button>
</form>
quelle
FormData
Ansatz sollte gut mit Formularen funktionieren, die alles enthalten, was Sie wollen, nicht nur die Felder zum Hochladen von Dateien. es wird jedoch nicht allgemein unterstützt.FormData
Antworten:
Das Problem, das ich hatte, war die Verwendung der falschen jQuery-ID.
Mit ajax können Sie Daten und Dateien mit einem Formular hochladen .
PHP + HTML
jQuery + Ajax
Kurzfassung
quelle
$(this)[0]
ist nur ein Alias vonthis
,new FormData(this)
sollte also ausreichen.async: false
scheint nicht erforderlich zu sein, damit dies funktioniert, und führt zu Blockierungen in mobilen Browsern (Single Threaded)Eine andere Möglichkeit besteht darin, einen Iframe zu verwenden und das Ziel des Formulars darauf festzulegen.
Sie können dies versuchen (es verwendet jQuery):
Es funktioniert gut mit allen Browsern. Sie müssen die Daten nicht serialisieren oder vorbereiten. Ein Nachteil ist, dass Sie den Fortschritt nicht überwachen können.
Zumindest für Chrome wird die Anforderung nicht auf der Registerkarte "xhr" der Entwicklertools angezeigt, sondern unter "doc".
quelle
Ich hatte das gleiche Problem in ASP.Net MVC mit HttpPostedFilebase und anstatt das Formular beim Senden zu verwenden, musste ich die Schaltfläche beim Klicken verwenden, wo ich einige Dinge tun musste, und wenn alles in Ordnung ist, hat das Senden-Formular hier funktioniert
Dadurch wird Ihr MVC-Modell korrekt ausgefüllt. Stellen Sie in Ihrem Modell sicher, dass die Eigenschaft für HttpPostedFileBase [] denselben Namen hat wie der Name des Eingabesteuerelements in HTML, d. h
quelle
contentType : "application/octet-stream"
Oder kürzer:
quelle
Für mich hat es ohne
enctype: 'multipart/form-data'
Feld in der Ajax-Anfrage nicht funktioniert . Ich hoffe, es hilft jemandem, der in einem ähnlichen Problem steckt.Obwohl das
enctype
bereits im Formularattribut festgelegt wurde, hat die Ajax-Anforderung aus irgendeinem Grund dasenctype
ohne explizite Deklaration nicht automatisch identifiziert (jQuery 3.3.1).Wie bereits erwähnt, achten Sie bitte auch besonders auf die Felder
contentType
undprocessData
.quelle
enctype
nichts erwähnt wird.enctype
Feld aus einem bestimmten Grund nicht in der Dokumentation behandelt. Ich habe den jQuery-Quellcode nicht überprüft, daher kann ich nicht mit Sicherheit sagen.enctype
Feld entfernt habe, und es werden keine Dateien mehr hochgeladen (Fehler beim Codierungstyp werden zurückgegeben). Ich bin mir nicht sicher, wie das funktioniert, da ich den jQuery-Quellcode nicht überprüft habe. Ich habe diese Antwort mit der Absicht gepostet, anderen zu helfen, die in einem ähnlichen Problem stecken. Ich fische hier nicht nach Upvotes ... Wenn Sie weitere Fragen / Kommentare haben, lassen Sie uns chatten, anstatt zu kommentieren.Für mich folgende Code-Arbeit
Übergeben Sie in Ihrer Action Post-Methode den Parameter als HttpPostedFileBase UploadFile und stellen Sie sicher, dass Ihre Dateieingabe mit den Angaben in Ihrem Parameter der Action Method übereinstimmt. Es sollte auch mit AJAX Begin funktionieren.
Denken Sie hier daran, dass Ihr AJAX BEGIN-Formular hier nicht funktioniert, da Sie Ihren Post-Call im oben genannten Code definiert haben und Sie Ihre Methode im Code gemäß der Anforderung referenzieren können
Ich weiß, dass ich spät antworte, aber das hat bei mir funktioniert
quelle
Ein einfacher, aber effektiverer Weg:
new FormData()
ist selbst wie ein Behälter (oder eine Tasche). Sie können alles attr oder Datei in sich selbst setzen. Das einzige, was Sie brauchen, um dasattribute, file, fileName
zB anzuhängen :und einfach in AJAX-Anfrage übergeben. Z.B:
Mit FormData können Sie n Dateien oder Daten anhängen.
und wenn Sie eine AJAX-Anfrage von der Datei Script.js zur Routendatei in Node.js stellen, achten Sie darauf
req.body
, dass Sie nicht auf Daten (z. B. Text)req.files
zugreifen, um auf Dateien (z. B. Bild, Video usw.) zuzugreifen.quelle
In meinem Fall musste ich eine POST-Anfrage stellen, bei der Informationen über den Header gesendet wurden, sowie eine Datei, die mit einem FormData-Objekt gesendet wurde.
Ich habe es mit einer Kombination einiger der Antworten hier zum Laufen gebracht. Im Grunde ging es also darum, diese fünf Zeilen in meiner Ajax-Anfrage zu haben:
Wobei formData eine Variable war, die wie folgt erstellt wurde:
quelle
contentType: "application/octet-stream",
ist aktiv schädlich und der einzige Grund, warum es kein Problem verursacht, ist, dass Sie es zwei Zeilen später überschreiben.enctype: 'multipart/form-data',
ist sinnlos. jQuery.ajax erkennt diesen Parameter nicht.///// otherpage.php
quelle