Jquery Multiple File Upload Plugin ASP.NET
Autor: Natanael Santos | Publicado: 2014-03-01T22:20:00-03:00






Olá Programadores!



Neste tutorial, estaremos aprendendo como trabalhar com o plugin Jquery Multiple File Upload, que é responsável por gerenciar as requisições de arquivo entre cliente e servidor.&nbsp;



Vantagens

* Multi-linguagem

* Personalização

* Layout intuitivo

* Validações

* Eventos



O tutorial foi divido em dois módulos, o primeiro, o lado frond-end e o segundo, back-end.



1º Módulo Frond-end



1.1 Adicionar os cdn's de css e js, entre a tag &lt;head&gt; e &lt;/head&gt;




&lt;link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet" /&gt;

&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"&gt;&lt;/script&gt;




1.2 Adicionar a div, responsável pela interação dos uploads, entre a tag &lt;body&gt; e &lt;/body&gt;




&lt;div id="fileuploader"&gt;Selecionar Arquivo&lt;/div&gt;




1.3 Configuração do plugin.




&lt;script&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(document).ready(function () {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $("#fileuploader").uploadFile({

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url: "HandlerFoto.ashx",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fileName: "file",



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; maxFileSize: 4194304,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; maxFileCount: 10,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; multiple: true,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; allowedTypes: "jpg,png,gif",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; showStatusAfterSuccess: false,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dragDropStr: "&lt;span&gt;
ou Arraste pra cá! &lt;/span&gt;",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; doneStr: "Enviado",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; abortStr: "Cancelar",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;extErrorStr: "Extensão
não permitida.",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sizeErrorStr: "Foi ultrapassado o tamanho máximo para upload de
arquivo",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; maxFileCountErrorStr: "Foi ultrapassado o limite de upload.",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;afterUploadAll: function () {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert("Arquivo(s) enviado com sucesso.");

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });



&lt;/script&gt;




Finalizado o 1º Módulo.



2º Módulo Back-end



2.1 Criar uma handler chamado HandlerFoto.ashx



Adicionar no método ProcessRequest o trecho de código a seguir.




&nbsp;HttpPostedFile file =
context.Request.Files["file"];



if (file != null)

{

&nbsp; &nbsp;file.SaveAs(@"c:\\tmp\" +
file.FileName);

}






Configurando &nbsp;o plugin



Textos



dragDropStr: trecho do drag-and-drop. Ex: &lt;span&gt; ou arraste pra cá! &lt;/span&gt;.

abortStr: Botão responsável por cancelar o upload: Ex: Cancelar.

doneStr: Botão responsável por dizer upload realizado com sucesso. Ex: Enviado.

extErrorStr: Mensagem caso a extensão seja diferente da definida na propriedade&nbsp;allowedTypes.

sizeErrorStr: Mensagem caso ultrapasse o limite de tamanho definido na propriedade maxFileSize.

maxFileCountErrorStr: Mensagem caso ultrapasse o limite de upload definido na propriedade maxFileCount.



Validações



maxFileSize: tamanho máximo do arquivo em bytes. Ex: 4194304 = 4 MB.

maxFileCount: Quantidade máxima de arquivo para upload. Ex: 10.

multiple: Habilitar múltiplos arquivos enviado ao servidor. Ex. true ou false.

allowedTypes: Extensões permitidas: Ex: jpg,png,gif.

showStatusAfterSuccess: Ao finalizar o upload de um arquivo, retira a div.



Eventos



onSuccess: Ao finalizar um arquivo com sucesso.

onError: Erro em um arquivo.

afterUploadAll: &nbsp;Ao concluir todos os uploads.



Pronto, através desse plugin é possível ter um layout intuitivo com o usuário.



Clique aqui para visualizar a documentação completa.



Valeu pessoal!
Download do projeto - Clique aqui