Html5+websocket implementa exemplos de upload multi -arquivo ao mesmo tempo

O upload de vários arquivos ao mesmo tempo no aplicativo HTTP tradicional e o upload e a visualização do progresso do upload é uma coisa muito problemática. de um documento também é muito conveniente.

Provavelmente visualize as funções que você precisa fazer:

A principal função é que o usuário pode arrastar e soltar diretamente o arquivo da pasta na página da web e carregá -lo.

Para facilitar as informações do arquivo de leitura, uma classe de objeto de leitura simples de arquivo é encapsulada na base do arquivo original.

 FUNÇÃO FILHO (FILHO, PAGE) {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 = novo uint8aray (this.databuffer) var len = bytes.bytelength; i])} Retorne window.btoa (binário);} fileInfo.prototype.onloadData = função (evt) {var obj = evt.target [tag]; banco de dados = evt .target.result; }} FileInfo. Leitor [tag] = this; Count; Canal = file._channel; }}} Função (resultado) {if (resultado.status == null || result.status == indefinido) {file.pageIndEx ++; if (file.pageIndex <file.pages) {fiload.load (file.onuploaddata);}} else {if (file.uploaderror! = null) file.uploaderror (arquivo, data.status); = função (canal, url) {var fi = this; if (if (if (if resultado.status == null || result.status == indefinido) {fi._channel = canal; fi._url = resultado.data; fi.load (fi.onuploaddata);} else {se (FILE. UPLOPLEERROR! = NULL) file.uploaderror (fi, resultado.status);}});}

O processamento da classe é muito simples. arquivo.

Não é necessário fazer coisas complicadas no HTML5 para serem arrastadas no HTML5.

 Função ONDAGENTER (e) {E.StopPropagation (); (e) {E.StopPagation (); ('Arredondado');

Você só precisa obter arquivos de arrastar e soltar relacionados durante o processo ONDROP.

No momento, você só precisa criar um objeto FileInfo relacionado para o arquivo selecionado e chamar o método de upload.

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

Atualize as informações de progresso do arquivo de upload através do evento Uploadprocess

 Function onuploadprocess (file) {$ ('#p_' + file.id) .progressBar ({value: (file.pageIndex / file.pages) * 100, texto: file.filename + ' + fi le.uploadbytes +' / ' + file.size +'] '});}

Com a ajuda do suporte do Beetle para o WebSocket, a implementação do servidor correspondente é muito simples

 /// <summary> /// Copyright © Henryfan 2012 /// CreateTime: 2012/12/14 21:13:34 /// </summary> Public Class Handler {public void UploadPackage (String FileId, Int PageIndex, int. Páginas, String base64Data) {console.WriteLine (FILEID: {2}, PageIndex: {0} páginas: {1} datalength: {3}, PageIndex, fileId, base64data.lengt h);} public uploadfile (string fileId, String FileName, tamanho longo) {Console.WriteLine (FILEID: {2}, nome do arquivo: {0} tamanho: {1}, nome do arquivo, tamanho, fileID);

Existem dois no método do servidor de fazer upload de solicitações de arquivo e um método de recebimento de bloco de arquivo de upload.

Você só precisa do código simples para obter a função de upload multi -arquivo. MASC PROCESSION PLUS PLUS PLUS BASE64 A perda é relativamente pesada.

Download Código: websocketupload.rar

O acima é todo o conteúdo deste artigo.