Multi Upload em Asp.Net com o plugin Uploadfy do JQuery.

O jQuery possui um plugin bastante interessante, chamado Uploadfy, que permite realizar multi upload de arquivos em aplicaç�es Web. O Uploadfy � uma mistura de Javascript com ActionScript, que, juntamente com uma linguagem de programaç�o rodando no lado servidor (ASP.NET, PHP ,etc.), oferece um poderoso recurso para realizar uploads.

A principal caracter�stica deste plugin � a possibilidade de selecionar mais de um arquivo no momento do upload, recurso este n�o dispon�vel pelo controle de upload do ASP.NET.

Al�m disto, este plugin pode ser bem customiz�vel na aplicaç�o, permitindo configurar diversas opç�es de forma simples, caracter�stica comum a plugins do jQuery.

Criando o projeto

Vamos começar criando um projeto Web no Visual Studio 2008, utilizando a linguagem C#. Abra o Visual Studio, selecione: File=>New Project. Selecione o template ASP.NET WebApplication, e crie um novo projeto com o nome MultiUpload.

Antes de começar a codificar, precisamos realizar o download dos arquivos do Uploadfy. Acesse o link http://www.uploadify.com/download/, baixe a vers�o 2.1.4., salve-a em um diret�rio local, e descompacte o arquivo.

Voltando ao Visual Studio, crie uma nova pasta no projeto: click com o bot�o direito no projeto => New Folder. D� o nome de Uploadfy a nova pasta.

Adicione os arquivos baixados anteriormente a esta pasta criada: click com o bot�o direito na pasta => Add Existing item. Procure pela pasta onde est�o os arquivos descompactados e adicione-os.

Observaç�o: N�o iremos precisar do arquivo uploadfy.php, pois ser� utilizado um arquivo handler.ashx para realizar o processamento dos arquivos carregados no sistema.Segue abaixo a lista de arquivos adicionados ao projeto:

Vamos utilizar a p�gina Default.aspx (criada automaticamente) para implementar o upload. Adicione � p�gina um controle FileUpload, com a propriedade Id=�fupMulti�. Quando a p�gina for carregada, este controle ser� substitu�do automaticamente pelo controle de upload do Uploadfy.

Adicione agora uma tag html <div>, que ser� o container onde ser�o apresentados os arquivos carregados durante o upload. Segue abaixo o c�digo contendo os elementos citados acima:

Observe que definimos o id do elemento <div> como �arquivosContainer�. Este id ser� utilizado posteriormente no m�todo do Uploadfy.

O pr�ximo passo � adicionar o arquivo CSS e as bibliotecas Javascript do JQuery e do Uploadfy, que se encontram na pasta do Uploadfy adicionada anteriormente ao projeto, a p�gina Default.aspx. Para adicionar as refer�ncias, basta arrastar cada arquivo at� a p�gina. Segue abaixo como devem ficar as refer�ncias dentro da tag <head>:

Feito isso, � necess�rio adicionar, na mesma tag <head>, a funç�o Uploadfy(), respons�vel por criar uma inst�ncia do uploader. Veja como deve ficar c�digo da funç�o:

Como pode ser observado, est� funç�o possui algumas opç�es que podem ser customizadas. Vamos a elas:

Propriedade	Funç�o	Tipo do Par�metro
auto	Realiza o upload dos arquivos automaticamente, a medida que s�o adicionados a fila de upload	boolean
buttonText	Define o texto que ir� aparecer no bot�o de upload	string
cancelImg	Caminho da imagem que ser� usada no bot�o cancelar	string
displayData	Tipo de informaç�o que ser� apresentada durante um upload (porcentagem,barra de progresso ou ambos)	string
folder	Caminho da pasta onde ser�o armazenados os arquivos	string
fileExt	Lista de extens�es permitidas no upload	string
multi	Permitir multiupload de arquivo	boolean
queueSizeLimit	N�mero limite de arquivos que podem ser adicionados por vez	int
queueID	ID do elemento na p�gina que ser� usado como arquivo da fila	string
removeCompleted	Habilita a remoç�o autom�tica dos arquivos que foram carregados	boolean
Script	Caminho do arquivo que ir� processar os arquivos carregados	string
sizeLimit	Limite de bytes permitido para cada arquivo carregado	int
Uploader	Caminho correspondente ao arquivo uploadfy.swf	string

A funç�o tamb�m possui os seguintes eventos:

onSelectOnce: Trigger acionada para cada arquivo carregado na fila.
onAllComplete: Trigger acionada quando o upload de todos os arquivos foram finalizados.

� importante ressaltar que existem outras propriedades e eventos presentes no plugin do Uploadfy, que permitem customizar ainda mais o controle. Neste artigo, iremos utilizar apenas estas citadas acima, que ser�o suficientes para nossa aplicaç�o.

Note que a funç�o Uploadfy() possui uma propriedade chamada script, que armazena o caminho do arquivo respons�vel pelo processamento das imagens carregadas. No nosso exemplo,vamos criar um arquivo do tipo handler (.ashx), que ir� recuperar o nome do arquivo que est� sendo carregado, e ent�o salvar este nome em um arquivo texto .

Adicione este arquivo na pasta Uploady, criada anteriormente. Click com o bot�o direito na pasta, selecione Add => New Item. Selecione o arquivo do tipo Generic Handler, e d� onome de Handler.ashx.

Adicionado o arquivo, vamos acrescentar o seguinte c�digo no corpo do m�todo ProcessRequest ():

No trecho acima, o arquivo postado � passado a um objeto do tipo HttpPostedFile. O restante do c�digo cria um arquivo texto no diret�rio raiz do c:\teste, e escreve neste arquivo o nome do arquivo postado.

Este m�todo ser� invocado automaticamente cada vez que um arquivo for carregado.

Testando a aplicaç�o

Antes de executar a aplicaç�o, adicione um breakpoint dentro do m�todo ProcessRequest(), do arquivo Handler.ashx. Isso nos mostrar� o momento em que o m�todo � chamado peloUploadfy.

Execute o projeto e veja o resultado. Note que o controle de FileUpload do ASP.NET n�o aparece na tela. Ele foi substitu�do pelo bot�o �Selecionar�. Selecione uma pasta que contenha imagens e perceba que � poss�vel selecionar mais de um arquivo, bastando apenas pressionar a tecla Ctrl e escolher os arquivos:

Ao selecionar os arquivos, os mesmos ser�o listados no container que adicionamos, e o processo de carregamento iniciar�. Perceba que para cada arquivo carregado, � acionado om�todo ProcessRequest(), do arquivo handler.ashx, que, em nosso exemplo, tem a funç�o de gravar o nome do arquivo carregado em um arquivo texto:

Ao final do processamento, s�o apresentados os arquivos carregados e o status dos mesmos.

Neste artigo foi apresentado o plugin Uploadfy, do JQuery . Este plugin permite realizar multi upload de arquivos, recurso este parecido com o utilizado pelo e-mail do Gmail para anexar arquivos.

Uma caracter�stica do Uploadfy que vale ser destacada � a quantidade de opç�es que podem ser customizadas de forma bastante simples, como por exemplo, tamanho m�ximo dos arquivos, extens�es permitidas, imagens para bot�es de cancelamento e seleç�o, entre outros.

At� a pr�xima.

Multi Upload em Asp.Net com o plugin Uploadfy do JQuery.

Neste artigo, será demonstrado como realizar o upload de vários arquivos simultaneamente (MultiUpload de arquivos), utilizando o plugin Uploadfy do JQuery. Este plugin permite que mais de um arquivo seja selecionado de uma só vez no momento do

Criando o projeto

Testando a aplicaç�o

Artigos relacionados