HTML5+WebSocket implementa ejemplos de carga de múltiples archivos al mismo tiempo

Cargar múltiples archivos al mismo tiempo en la aplicación HTTP tradicional y la carga y la visualización del progreso de la carga es algo muy problemático. de un documento también es muy conveniente.

Probablemente previsualice las funciones que debe hacer:

La función principal es que el usuario puede arrastrar y soltar directamente el archivo de la carpeta en la página web y cargarlo.

Para facilitar la información de lectura del archivo, se encapsula una clase de objeto de lectura de archivo simple sobre la base del archivo original.

 FUNCIÓN FileInfo (File, PageSize) {this.size = file.size; Páginas = 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 (binary);} fileInfo.prototype.onloadData = function (evt) {var obj = evt.target [tag]; databuffer = evt .target.result; }} FileInfo. Lector [tag] = this; Count; Canal = file._channel; }}} Function (resultado) {if (resultado.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);}); = function (canal, url) {var fi = this; if (if (if (if resultado.status == null || result.status == undefined) {fi._channel = canal; fi._url = resultado.data; fi.load (fi.onuploaddata);} else {if (archivo. uploadErRor! = null) file.uploadError (fi, result.status);}});}

El procesamiento de la clase es muy simple. Archivo.

No es necesario hacer cosas complicadas en HTML5.

 Function onDragenter (e) {E.StopPrapagation (); (e) {E.StopPropagation (); ('Redondeado');

Solo necesita obtener archivos de arrastrar y soltar relacionados durante el proceso de Ondrop.

En este momento, solo necesita crear un objeto FileInfo relacionado para el archivo seleccionado y llamar al método de carga.

 Function onFileOpen (archivos) {if (files.length> 0) {for (var i = 0; i <files.length; i ++) {var info = new FileInfo (files [i], 32768); ;

Actualice la información de progreso del archivo de carga a través del evento de OploadProcess

 Función onUploadProcess (file) {$ ('#p_' + file.id) .progressBar ({value: (file.pageIndex / file.pages) * 100, text: file.fileName + ' + fi le.uploadbytes +' / / / / / / ' /' / ' /' ' + file.size +'] '});}

Con la ayuda del soporte de Beetle para WebSocket, la implementación del servidor correspondiente es muy simple

 /// <summary> /// Copyright © Henryfan 2012 /// CreateTime: 2012/12/14 21:13:34 /// </summary> Handler de clases públicas {public void uploadPackage (string fileID, int pageindex, int Páginas, String Base64Data) {Console.WriteLine (fileId: {2}, pageIndex: {0} páginas: {1} dataLenggth: {3}, pageIndex, fileID, base64data.lengt h);} public String uploadFile (String fileId,, String File Name, Long Size) {Console.WriteLine (fileId: {2}, nombre de archivo: {0} tamaño: {1}, nombre de archivo, tamaño, fileid);

Hay dos en el método del servidor para cargar solicitudes de archivo y un método de recepción de bloque de archivo de carga.

Solo necesita el código simple anterior para lograr la función de carga múltiple. La pérdida de Mask Processing Plus Plus Base64 es relativamente pesada.

Código de descarga: WebSocketupload.rar

Lo anterior es todo el contenido de este artículo.