HTML5 + WebSocket implémente des exemples de téléchargement multi-fichiers en même temps

Le téléchargement de plusieurs fichiers en même temps dans l'application HTTP traditionnelle et le téléchargement et la visualisation de la progression du téléchargement est une chose très gênante. d'un document est également très pratique.

Prévisualisez probablement les fonctions que vous devez faire:

La fonction principale est que l'utilisateur peut glisser directement et déposer le fichier du dossier dans la page Web et le télécharger pendant le processus de téléchargement, les informations de progression de téléchargement s'affichent.

Afin de faciliter la lecture des informations sur le fichier, une classe de lecture de fichiers simples est encapsulée à la base du fichier d'origine.

 Fonction FileInfo (File, PageSize) {this.size = file.size; pages = 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 (binaire);} fileInfo.prototype.onloadData = fonction (evt) {var obj = evt.target [tag]; databuffer = evt .target.result; if (obj.loadcallback! = null) obj.loadcallback (obj);} else {if (obj.uploadError! = null) obj.uploadError (fi, evt.target.er ror); }} FileInfo. Reader [Tag] = this; Reader.onloadnd = this.onloaddata; Count; Canal = file._channel; }}} Fonction (result) {if (result.status == null || result.status == undefined) {file.pageIndex ++; if (file.pageIndex <file.pages) {file.load (file.onuploadData);}} else {if (file.uploadError! = null) file.uploadError (file, data.status);}); = fonction (canal, url) {var fi = this; if (if (if (if result.status == null || result.status == Undefined) {fi._channel = canal; fi._url = result.data; fi.load (fi.onuploaddata);} else {if if (fichier. uploadError! = null) file.uploadError (fi, result.status);}});}

Le traitement de la classe est très simple. fichier.

Il n'est pas nécessaire de faire des choses compliquées dans HTML5.

 Fonction OnDrageNer (E) {E.Stoppropagation (); (e) {E.StopPropagation (); E.PreventDefault (); $ (Dropbox). («Arrondi»);

Vous avez seulement besoin d'obtenir des fichiers de glisser et de dépôt pendant le processus d'ONDROP.

À l'heure actuelle, il vous suffit de créer un objet FileInfo connexe pour le fichier sélectionné et d'appeler la méthode de téléchargement.

 Fonction onfileopen (files) {if (files.length> 0) {for (var i = 0; i <files.length; i ++) {var info = new FileInfo (files [i], 32768); o). ;

Mettez à jour les informations de progression du fichier de téléchargement via l'événement UploadProcess

 Fonction onuploadProcess (file) {$ ('#p_' + file.id) .progressbar ({value: (file.pageindex / file.pages) * 100, texte: file.filename + '+ fi le.uploadbytes +' / '+ file.size +'] '});}

À l'aide de la prise en charge de Beetle pour WebSocket, l'implémentation du serveur correspondant est très simple

 /// <summary> /// Copyright © Henryfan 2012 /// Createtime: 2012/12/14 21:13:34 /// </summary> Handler de classe publique {public void uploadPackage (String FileId, int PageIndex, int Pages, String Base64Data) {Console.WriteLine (FileId: {2}, PageIndex: {0} Pages: {1} Datal Length: {3}, PageIndex, FileId, Base64Data.Lengt H);} public String uploadFile (String FileId, String FileName, Long Size) {Console.WriteLine (FileId: {2}, nom de fichier: {0} Taille: {1}, nom de file, FileId);

Il y en a deux dans la méthode du serveur de téléchargement de demandes de fichiers et une méthode de réception de bloc de fichiers de téléchargement.

Vous avez seulement besoin du code simple ci-dessus pour atteindre la fonction de téléchargement multi-fichiers. Mask Processing Plus Plus Plus PLUS La perte de Base64 est relativement lourde.

Télécharger le code: WebSocketUpload.rar

Ce qui précède est tout le contenu de cet article.