HTML5 - Dateien hochladen

Wenn wir Datenerfassungsformulare auf einer Seite haben HTML5 Abgesehen davon, dass wir Daten mit Eingabefeldern aufnehmen können, können wir auch Dateien hochladen, damit können wir das Laden bestimmter Daten beschleunigen, die sich nicht in Text ausdrücken lassen oder sehr lange Texte sein können, es ist üblich, Bilder hochzuladen Dateien oder pdf-Dateien, da diese beiden Formate sehr beliebt sind, jedoch mit Ajax Wir können fast jede Art von Datei hochladen.
Daten hochladen
Zu Hochladen von Dateien mit Ajax, müssen wir in einem Formular und in unserer Routine ein Dateitypfeld erstellen Ajax ein Objekt benutzen Formulardaten mit denen wir die Daten erheben, um ihnen das erforderliche Format zu geben und unsere Datei auf den Server hochzuladen.
Das Objekt Formulardaten Es muss mit Vorsicht verwendet werden, da es möglicherweise noch Versionen von Browsern gibt, die es nicht vollständig unterstützen, es ist jedoch eine ziemlich solide Lösung.
Sehen wir uns im folgenden Code an, wie Sie einen einfachen Dateiupload durchführen:

 BeispielBananen:Äpfel:Kirschen:Datei:Gesamt:0 ArtikelFormular senden 

Beim Einbinden der Dateitypeingabe wird das Objekt Formulardaten trifft automatisch die Vorkehrungen, damit unsere Datei auf den Server hochgeladen werden kann, in der folgenden Abbildung sehen wir, wie der Browser dies interpretiert:

In diesem Fall war es ein ziemlich helles Bild, so dass die Zeit zum Hochladen der Datei auf den Server nicht spürbar ist. Wenn es sich jedoch um ein 30 MB-PDF handelt, wäre die Zeit viel länger, da dies für den Benutzer transparent ist, er könnte denken, dass die Seite nicht "etwas tun" oder "gedacht" haben, um dies zu vermeiden, können wir einen Fortschrittsbalken einbauen, mit dem der Fortschritt sichtbar wird.
Um den Fortschritt des Aufstiegs zu sehen, verwenden wir das Objekt XMLHttpRequest um den Status der Anfrage zu überprüfen Ajax:

 BeispielBananen:Äpfel:Kirschen:Datei:Fortschritt:Gesamt:0 ArtikelFormular senden 

Wir haben ein Element definiert Fortschritt und mit ihm XMLHttpRequest-Objekt Wir können die Werte während des Uploads zuweisen, im Browser können wir dies wie folgt sehen:

VERGRÖSSERN

Wir können benutzen Ajax Für weit mehr als Beratungselemente auf anderen Seiten können wir damit auch unsere Formulare in Bezug auf die Datenerfassung verbessern.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben