HTML Formular mit JavaScript verarbeiten (inkl. Dateiupload)
Вставка
- Опубліковано 23 лип 2024
- 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!
nodejs.org/en/
github.com/expressjs/multer#r...
😺 Source Code
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
↪︎ github.com/ProgrammierenM/jav...
⏩ 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:
↪︎ • Node JS
JavaScript Promises:
↪︎ • Lerne JavaScript Promi...
JavaScript Console Tutorial:
↪︎ • Lerne alle Console Fun...
📌 Ü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!
/ @programmierenmario
#JavaScript #HTMLForm #ProgrammierenM
Wieder mal ein tolles tutorial💪😎. Und wieder mal was dazu gelernt👍 vielen Dank und schöne Grüße aus Hamburg✌️
Liebe Grüße zurück :)
Vielen Dank für das tolle Video! 🥰
Gern geschehen ✌️🙂
Herzlichen Dank!!! Wie immer klasse!!!
Danke für das Lob!
Danke für das Tutorial, auch wenn ich es erst noch anschauen muss.
Viel Spaß beim anschauen :)
Spitzenmäßiges Tutorial!💯💯👍👍
Vielen Dank! ✌
super Video und echt gut erklärt 👍
Vielen Dank 👍
Wie immer top.
Danke 👍
Wow du bist stark
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!
Vielen Dank für deine Ergänzung ✌
Habe den Quelltext gefunden. Danke
"Ja, ich möchte Spam". 😂😂
Na dann bitte hier einmal bestätigen 😂
Danke sehr
Bitte sehr!
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
Vielen Dank für deine Anfrage. Werde es mir gerne mit auf die Liste setzen. 👍
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..
Könnte es sein das dein Frontend unter einer anderen Portnummer lief? Mit * erlaubst du den Zugriff generell, egal woher die Anfrage kommt.
musst du beim Dateiupload im Form-Tag kein enctype="multipart/form-data" angeben? ich sah das im Video nicht.
In diesem Fall nicht. Das brauchst du nur wenn du die Formulardaten über das Formular auch abschickst. In dem Beispiel im Video lese ich aber die Daten aus dem Formular via JavaScript aus und erzeuge ein neues FormData Objekt welches ich an den Server schicke. Das ist sinnvoll wenn du die Website nicht neu laden willst oder auf eine andere Seite verlinken willst. So kannst du einfach die Daten senden und gleichzeitig auf der aktuellen Seite bleiben.
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
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!
Hi Aljosha, wichtig ist das die Radio Elemente welche zusammengehören das gleiche name Attribute haben und jedes ein anderes value Attribut. Dann sollte es mit im Formdata Objekt stehen und was ausgewählt wurde wenn du mein Beispiel aus dem Video verwendest.
@@ProgrammierenMario Hi Mario, danke für die schnelle Antwort! ich werde es gleich mal ausprobieren.
Hallo Mario, liefe das dann auch auf Smartphones und mit GDrive ?
Naja dazu müsste man noch die API von Google Drive verwenden. Aber vom Handy aus kannst du ja gleich die GDrive App verwenden wenn du deine Dateien sowieso da hochladen möchtest 🤷♂️
@@ProgrammierenMario ich würde gerne unterwegs Daten sammeln. Geht das nicht nur mit html ? Einfach eine .txt auf gdrive oder der Fritzbox anlegen und nach und nach füllen. Wenn php dazu kommt, dann muss ich ja wieder einen Server laufen lassen. Ich hab keine Ahnung, wie sowas einfach geht.
Funktioniert das bei neueren Versionen auch?
Mir sind aktuell keine Probleme bekannt.
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.😅
Das ist richtig. Grundsätzlich sind alle Tutorials nur für Lernzwecke. Für ausgereifte und stabile Software müsste ich dann doch mal die Hand aufhalten 😂