sábado, 1 de março de 2014

Jquery Multiple File Upload Plugin ASP.NET

1.3.14  , , ,  2 comments


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. 

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.



2 comentários:

Assinar: Postar comentários (Atom)