HTML5+WebSocket implementiert gleichzeitig Beispiele für das Hochladen von Multi -File

Das Hochladen mehrerer Dateien gleichzeitig in der herkömmlichen HTTP -Anwendung und das Hochladen und Anzeigen des Fortschritts des Hochladens ist sehr problematisch. Ein Stück Dokument ist auch sehr bequem.

Wahrscheinlich Vorschau der Funktionen, die Sie ausführen müssen:

Die Hauptfunktion ist, dass der Benutzer die Datei des Ordners direkt in die Webseite ziehen und während des Upload -Vorgangs hochladen kann.

Um das Lesen von Dateiinformationen zu erleichtern, wird eine einfache Dateiinformations -Lesen -Objektklasse auf der Grundlage der Originaldatei eingekapselt.

 Funktionsdatei (Datei, pagesze) {this.size = Datei.Size; Seiten = 0; 16); LSE {this.Pages = math.floor (this.size / this.pageSize);}} fileInfo.prototype.reset = function () {this.pageIndex = 0; Function () {var binary = 'var bytes = new Uint8aray (this.databuffer) var len = bytes.bytelength; i])} return window.btoa (binär);} fileInfo.prototype.onloadData = Funktion (evt) {var obj = evt.target [tag]; DataBuffer = evt .Target.Result; }} FileInfo. Reader [tag] = this; Count; var blob = file Channel = Datei._Channel; }}} Function (result) {if (result.status == null || result.status == undefiniert) {Datei.PageIndex ++; if (file.pageIndex <file.pages) {file.load (file.onUploadData);}} else {if (Datei.Uploaderror! = Funktion (Kanal, url) {var fi = this; if (if (if (if result.status == null || result.status == undefined) {fi._channel = Kanal; fi._url = result.data; fi.load (fi.onuploaddata); (Datei. UploadError!

Die Verarbeitung der Klasse ist sehr einfach. Datei.

Es ist nicht notwendig, komplizierte Dinge in HTML5 zu tun.

 Funktion ONDRAGERN (E) {E.Stoppropagation (); (e) {E.Stoppropagation (); ('Abgerundet');

Während des ONDROP -Vorgangs müssen Sie nur verwandte Drag & Drop -Dateien erhalten.

Zu diesem Zeitpunkt müssen Sie nur ein zugehöriges FileInfo -Objekt für die ausgewählte Datei erstellen und die Upload -Methode aufrufen.

 Funktion OnFileOpen (Dateien) {if (Dateien.length> 0) {für (var i = 0; i <files.length; i ++) {var info = new FileInfo (Dateien [i], 32768); ;

Aktualisieren Sie die Informationen zur Fortschrittsdatei -Fortschrittsdatei -Informationen über das UploadProcess -Ereignis

 Funktion OnuploadProcess (Datei) {$ ('#p_' + file.id) .ProgressBar ({value: (file.pageIndex / file.pages) * 100, text: fileName + ' + fi le.uploadBytes +' / ' + file.size +'] '});}

Mit Hilfe der Unterstützung von Beetle für WebSocket ist die Implementierung des entsprechenden Servers sehr einfach

 /// <summary> /// Copyright © Henryfan 2012 /// CreateTime: 2012/12/14 21:13:34 /// </summary> public class Handler {public void UploadPackage (String FileId, Int PageIndex, int Seiten, String Base64Data) {console.writeLine (DateiId: {2}, pageIndex: {0} Seiten: {1} datalength: {3}, pageIndex, FileId, Base64Data.lengT H); String -Dateiname, Langgröße) {console.writeLine (DateiId: {2}, Dateiname: {0} Größe: {1}, Dateiname, DateiId);

Die Servermethode zum Hochladen von Dateianforderungen und eine Upload -Dateiblockemethode.

Sie benötigen nur den obigen einfachen Code, um die Funktionen von Multi -File zu erzielen. Die Maskenverarbeitung plus plus Plus Base64 -Verlust ist relativ stark.

Download -Code: WebSocketUpload.rar

Das oben genannte ist der Inhalt dieses Artikels.