HTML Formular mit JavaScript verarbeiten (inkl. Dateiupload)

HTML Formular effektiv mit JavaScript verarbeiten und serverseitig mit NodeJS empfangen. Und das alles inklusive Dateiupload. Neben JavaScript FormData und Fetch nutzen wir Pakete wie Express JS, CORS und Multer für NodeJS um alle Hürden für Anfänger zu überwinden. Happy Coding!

😺 Source Code
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

⏩ Videoinhalt
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
00:00 Einleitung/Vorbereitung
03:09 Daten auslesen
09:50 FormData in JS
16:00 Request erstellen
17:35 Daten mit Fetch absenden
21:24 Backend mit NodeJS
27:58 WebServer erstellen
30:27 Antwort senden
32:18 CORS Fehler beheben
37:33 Daten empfangen
42:09 File Upload mit Multer
47:35 DiskStorage verwenden

⭐ Das könnte dich auch interessieren
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Node JS, Express und NPM Tutorials:

JavaScript Promises:

JavaScript Console Tutorial:

📌 Über diesen Kanal und mich
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Webentwicklung effizient und einfach. Alles rundum Webentwicklung, Webdesign und angrenzende Themen. Mein Name ist Mario und ich bin bereits seit vielen Jahren beruflich als Web Entwickler tätig. Einige Tutorials auf diesem Kanal sind für absolute Anfänger ohne Vorkenntnisse geeignet, und andere für erfahrene Entwickler.

Starte Jetzt!

#JavaScript #HTMLForm #ProgrammierenM

[robertpannicke]

Danke für das Tutorial, auch wenn ich es erst noch anschauen muss.

[tj-softwaresolution]

Wieder mal ein tolles tutorial💪😎. Und wieder mal was dazu gelernt👍 vielen Dank und schöne Grüße aus Hamburg✌️

[Marcinemos]

Herzlichen Dank!!! Wie immer klasse!!!

[pepegroll]

Falls sich mal jemand fragt, wie wie er den nodemon stoppen, kann; in der Konsole einfach strg + c betätigen.

Ich find Deine Videos wirklich super!! Danke dafür!

[ace_oneseven]

Hi, ich finde deine Videos echt gut^^
Was mich intressieren würde wäre, wie man bereitgestellte Daten von api´s auslesen kann, und diese dann in der Website ausgibt. Die Tutorials die ich auf youtube gefunden habe verstehe ich leider nur teilweise, so dass ich es nicht schaffe es auf ein eigenes Projekt anzuwenden (von der Hypixel-api daten abgreifen und auf einer eigenen Website ausgeben), wäre echt toll, wenn soetwas mal in deinen Videos aufgegriffen wird. LG

[DieterLueders]

Hallo Mario, liefe das dann auch auf Smartphones und mit GDrive ?

[hansgluck]

Hey Mario danke für deine Zeit und Erklärung.
Meine Frage wäre jetzt, was mache ich jetzt damit? Oder was kann ich mit dem Formular jetzt machen?
Vermutlich brauche ich ein echtes BE: damit diese Daten irgendwo gespeichert werden und sie vom User wiederverwendet werden können?
Grüße aus Leipzig

[sebi-bpuc]

Funktioniert das bei neueren Versionen auch?

[aljoshaapitzsch]

Danke für das tolle Video! Ich versuche gerade das Formular nachzubauen. Ich würde gerne zwei Radiobutton verwenden, mit denen man zwischen zwei Möglichkeiten auswählen soll.

Wie kann ich diese beiden Möglichkeiten verarbeiten? Bisher bekomme ich nur das Key-Element ausgewertet, jedoch nicht die eigentliche Antwort.

Ich würde mich sehr über eine Antwort freuen!

[mbarnick]

musst du beim Dateiupload im Form-Tag kein enctype="multipart/form-data" angeben? ich sah das im Video nicht.

[thomasludwiglifts]

Hat alles geklappt, auch wenn es gefühlt 4 Stunden gedauert hat, das Video auf meiner eigenen Seite umzusetzen. :D Bei mir geht es aber ausschließlich so:

const corsOptions = {origin: "*", };

(im server.js:8:10)


Keine Ahnung warum..

[birdy]

Ich hoffe keiner benutzt das Tutorial im richtigen Betrieb. Da fehlt zur Produktivität noch ne ganze Menge. Vom Datenschutz mal abgesehen die ganzen Fail Safe, Memory usw. aber dann würde das Video wohl mindestens 3 Stunden dauern.😅