HTML5 -Anwendungsdatei hochladen

Die Entwickler wurden lange Zeit in Bedrängnis genommen. Einige Websites verwenden das Attribut "Multipart/Form-Data" des Formulars, aber dieses Attribut erfordert, dass der Server spezielle Einstellungen vornimmt, um den Fortschritt anzuzeigen, und es ist auch kompliziert uns. Was du willst.

Lassen Sie uns nun sehen, warum HTML5 dieses Problem lösen kann und wie gut es kann.

Im HTML5 -Standard wird das XMLHTTPrequest -Objekt neu definiert, bekannt als XMLHTTPREquest Level 2, das die folgenden 5 neuen Funktionen enthält:

1. Unterstützen Sie Bytes hochladen und herunterladen, z. B. Dateien, Blobs und Formulardaten

2. fügte den Fortschritt des Hochladens und Herunterladens hinzu

3. Unterstützung von Cross -Domain -Anfragen

V.

5. Ermöglichen Sie die Auszeit der Anfrage

In diesem Tutorial achten wir hauptsächlich auf die ersten und zweiten Funktionen, insbesondere auf den zweiten Artikel-es kann den gewünschten Upload-Fortschritt liefern. Im Gegensatz zum vorherigen Plan erfordert diese Lösung nicht, dass der Server spezielle Einstellungen vornimmt, sodass jeder es versuchen kann, indem er sich das Tutorial ansieht.

Das obige Diagramm ist der Inhalt, den wir erreichen können:

1. Zeigen Sie die hochgeladenen Dateiinformationen an, z. B. Dateinamen, Typ, Größe

2. Ein Fortschrittsbalken, der echte Fortschritte zeigen kann

3. Die Geschwindigkeit des Hochladens

4. Schätzung des Restes der Zeit

5. Die Datenmenge, die hochgeladen wurde

6. Die Antwort des Servers, das nach dem Upload zurückgegeben wurde

Mit XMLHTTPREquest ist unser Upload -Prozess außerdem asynchron. Wenn der Benutzer die Datei hochladen, kann er weiterhin andere Elemente auf der Webseite bedienen und es ist nicht erforderlich, auf das Hochladen zu warten. Nachdem der Upload beendet ist, können wir die Antwort vom Server zurückholen, sodass der gesamte Upload -Prozess ziemlich logisch ist.

HTML5 fügt ein neues Fortschrittsereignis hinzu, das uns die folgenden Informationen liefert:

1. Gesamtdateigröße

2. geladen -die Größe des Hochgeladens

3.. Längenverpackbar -ob der Fortschritt berechnet werden kann

Es gibt nicht viele Informationen, aber es reicht aus, um den Fortschritt der Datei zu berechnen. Natürlich gibt es immer noch viele Dinge, die es nicht direkt gibt, was schade ist.

Es unterscheidet sich nicht wesentlich vom ordentlichen Code des Uploads von Dateien. Beachten Sie jedoch, dass das Eingabetag eine JavaScript -Funktion on onchange assoziiert.

 <! Zeile> <Label für = FileToUPload> Wählen Sie eine Datei zum Hochladen </label> <Eingabe type = Dateiname = FileToUpload id = FileToUpload = fileSelec Ted ();/> </div> <div> id = fileName> </div> <div id = fideSize> </div> <div id = Filetype> </div> <div class = row> <Eingabe type = Taste onclick = uploadFile () value = upload/>> << div

Sobald wir Eingaben in HTML verwenden, können wir ein filelistisches Objekt im JS -Code erhalten. Dieses Objekt ist Teil der neu hinzugefügten Datei -API in HTML5.

1. Name - Dateiname (enthält keinen Pfad)

2. Typ -Datei Typ (Kleinbuchstaben)

3. Größe -Dateigröße (Einheit ist Byte)

Genau das brauchen wir. Natürlich hat HTML5 auch ein FileReader -Objekt, aber wir haben es hier nicht verwendet. In den oben genannten drei Inhalten können wir nun die vom Benutzer hochgeladenen Größe und Dateitypen steuern, um den Druck während des Servers zu verringern und den Sicherheitsfaktor zu verbessern.

 Funktionsdelise () {var file = document.getElementById ('FileToUpload'). .Size * 100 / (1024 * 1024)) / 100) .tring () + 'mb'; Document.getElementById ('Dateiname') 'Typ:' + Datei.Type;}}

Was wird also passieren, wenn der Benutzer eine gute Datei wählt und auf Upload klickt?

 Funktion uploadFile () {var xhr = neuer xmlHttprequest (); ; Send (fd);} Funktion uploadProgress (evt) {if (evt.LengthComputable) {var prozentComplete = math.round. ) + '%';} Else {document.gTelementById ('ProgressNumber') .innerhtml = 'Es kann nicht berechnet werden';}} Funktion UploadComplete (EVT) { / * Dieses Ereignis wird angehoben, wenn der Server eine Antwort zurücksendet * / alert zurücksend (evt.target.responsetext);

In der zweiten Codezeile verwendet unser JS -Code ein anderes neues Objekt -formdata, das von einem anderen HTML5 gestartet wurde. Das FormularData -Objekt ist der Set der Formulardaten des Benutzers. Wir senden Daten an den Server, indem wir dieses Objekt drehen.

Natürlich können wir dieses Objekt auch manuell im Code erstellen, beispielsweise wie folgt:

 var fd = New FormData (); ]);

Zurück zum Thema. Rückblickend auf den vorherigen Code haben wir viele Ereignisüberwachung von XMLHTTPrequest hinzugefügt. Insbesondere ist es wichtig zu beachten, dass das, was wir verknüpfen, nicht XMLHTTPrequest selbst ist, sondern seine Attribute wie UploadProgress.

Schauen Sie sich schließlich den kompletten Code an.

 <! [0]; ) + 'Mb'; .Name; fd.Append (FileToUpload, Dokument false); prozentualComplete = math.round (ev.Loaded * 100 / evt.total); Zu berechnen '; Durch den Benutzer oder der Browser haben die Verbindung fallen gelassen.);} </script> </head> <boody> <Formular ID = Form1 EncTTYPE = MultiPart/Form-Data-Methode = post action = upload.php> <div class = row > <Label = FileToup Load> Wählen Sie eine Datei zum Upload </label> <Eingabe type = Dateiname = FileToUpload id = FileToUpload onchange = fileSelect ();/> </div> <div id = Dateiname> </div> < div id = fi lesize> </div> <div id = Filetype> </div> <div class = row> <Eingabetyp = Taste onclick = uploadFile () value = Upload/> </div m> </body> </html>

Ist unsere Aufgabe erledigt? Es kann gesagt werden, dass es vollständig ist, da dieser Code die Aufgabe des Hochladens von Dateien erledigen konnte, und es kann auch den Fortschritt des Hochladens anzeigen. Wir haben viele Dinge, die nicht getan wurden, wie CSS, wie CSS, die verschönern und so weiter. Dies ist jedoch nicht das Thema unseres Artikels.

Erinnern Sie sich schließlich daran, dass der Code des Tutorials auf dem Browser betrieben werden sollte, der die neuen Funktionen unterstützt.

Das oben genannte ist der Inhalt dieses Artikels.