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.
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 <head> e </head>
<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
1.2 Adicionar a div, responsável pela interação dos uploads, entre a tag <body> e </body>
<div id="fileuploader">Selecionar Arquivo</div>
1.3 Configuração do plugin.
<script>
$(document).ready(function () {
$("#fileuploader").uploadFile({
url: "HandlerFoto.ashx",
fileName: "file",
maxFileSize: 4194304,
maxFileCount: 10,
multiple: true,
allowedTypes: "jpg,png,gif",
showStatusAfterSuccess: false,
dragDropStr: "<span>
ou Arraste pra cá! </span>",
doneStr: "Enviado",
abortStr: "Cancelar",
extErrorStr: "Extensão
não permitida.",
sizeErrorStr: "Foi ultrapassado o tamanho máximo para upload de
arquivo",
maxFileCountErrorStr: "Foi ultrapassado o limite de upload.",
afterUploadAll: function () {
alert("Arquivo(s) enviado com sucesso.");
},
});
});
</script>
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.
HttpPostedFile file =
context.Request.Files["file"];
if (file != null)
{
file.SaveAs(@"c:\\tmp\" +
file.FileName);
}
Configurando o plugin
Textos
dragDropStr: trecho do drag-and-drop. Ex: <span> ou arraste pra cá! </span>.
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 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: Ao concluir todos os uploads.
Pronto, através desse plugin é possível ter um layout intuitivo com o usuário.
Valeu pessoal!
Download do projeto - Clique aqui
Download do projeto - Clique aqui
