hinzufügen von formdata funktioniert nicht in js?
Ich möchte bilder via ajax an mein backend versenden, best practice scheint ja wohl dafür ein FromData object zu machen und dort dann die files zu appenden. Irgendwie functioniert append aber nicht:
// Fetch DOM
const saveBtn = $('#saveBtn')[0];
console.log(saveBtn);
saveBtn.addEventListener('click', saveImage);
function saveImage() {
const fd = makeFormData();
console.log(fd);
console.log('clicks'); }
function makeFormData() {
const title = $('#title');
const service = $('#service');
const colors = $('#colors');
const logo = $('#logo').files;
const img = $('#img').files;
let fd = new FormData();
fd.append('test', 'test');
return fd; }
1 Antwort
Du fügst dem FormData-Objekt ja auch keine Bilddaten o.ä. zu.
Ich zeige am besten einmal ein Beispiel, wie es aussehen könnte. Dazu lege ich mir zwei Dateien an: index.php und response.php.
Erstere beinhaltet das Formular und den eigentlich auch interessantesten Teil:
<!doctype html>
<title>FormData test</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<form enctype="multipart/form-data" id="form">
<input name="title" value="title">
<input name="service" value="service">
<input name="colors" value="red, green, blue">
<input name="logo" type="file">
<input name="img" type="file">
<button>Send</button>
</form>
Hier zunächst ein kurzer Stopp. Wie du siehst, verwende ich für die Eingabefelder keine IDs, sondern name-Attribute. Es ist alles so, als wollte ich das Formular ganz normal abschicken. Zudem habe ich multipart/form-data als Encoding-Type angegeben, damit die Dateien auch wirklich übertragen werden (nicht nur deren Name).
Dem folgt nun das Skript:
<script>
$('#imageForm').submit(saveImage);
function saveImage() {
event.preventDefault();
let formData = new FormData(this);
formData.append("save", "");
$.ajax({
type: "POST",
url: "response.php",
data: formData,
processData: false,
contentType: false,
success: function(result) {
console.log(result);
}
});
}
</script>
Da du schon jQuery eingebunden hast, wäre es praktisch, auch durchgehend jQuery-Methoden zu verwenden. Wie hier die submit-Methode, um einen Event Handler für das submit-Event zu definieren.
Das Standardverhalten / der Standard-Event-Handler wird natürlich unterdrückt, es soll ja nur der AJAX-Request verschickt werden.
Das FormData-Objekt, welches ich erstelle, bekommt einfach nur das Formularelement übergeben. Den Rest erledigt es allein. Nur wenn du noch weitere Parameter anhängen möchtest, die nicht im Formular erwähnt werden, brauchst du die append-Funktion. Ich füge noch einen Parameter hinzu, der dem PHP-Skript später als Orientierung dient, dass es gerade einen Request vom Formular bekommen hat.
Der AJAX-Request ist tatsächlich etwas tricky, wenn man ihn mit jQuery ausführt. Du siehst, dass ich einige Properties auf false gesetzt habe. Sie könnten sonst die Daten verfälschen, die verschickt werden.
- Wäre processData wahr, würde jQuery versuchen, dein FormData-Objekt in einen Querystring umzuwandeln und daran scheitern.
- Wäre contentType wahr, würde jQuery dir einen falschen Content Type-Header im Request anhängen.
Die response.php ist letzten Endes nur noch dazu da, um kurz zu beweisen, dass die Daten auf der Serverseite angekommen sind.
<?php
if (isset($_POST["save"])) {
foreach ($_POST as $key => $value) {
print "$key: $value<br>";
}
foreach ($_FILES as $file) {
if ($file["error"] == 0) {
print $file["tmp_name"]."<br>";
}
}
}
Den Response würdest du zunächst nur in der Browserkonsole angezeigt bekommen. Allerdings könntest du die Dateien auch gleich direkt im gewünschten Verzeichnis abspeichern lassen.
move_uploaded_file($file["tmp_name"], "some/target/path");
Regex, du bist wie immer eine große Hilfe vielen dank für die lehrreiche Antwort.