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.



Visualizar

segunda-feira, 27 de janeiro de 2014

FileUpload Multiple ASP.NET C#

27.1.14  ,  3 comments


Neste tutorial estaremos aprendendo como fazer:
- Upload de vários arquivos
- Filtrar a seleção de arquivos
- Selecionar mais de um arquivos
- Salvar em uma pasta.

1º Preparar o layout do site.

Adicione a sessão dentro da tag <form>


<asp:FileUpload runat="server" ID="fuImagem" accept=".jpg,.png" AllowMultiple="True" />

O que é importante aqui?
O atributo accept é responsável por filtrar a seleção dos arquivos. Exemplo
Arquivo de imagem = image/*
Arquivo de video = video/*
Arquivo de audio = audio/*
Mais de um arquivo = .jpg, .png, .bmp

Lista completa dos arquivos suportados Clique aqui









O atributo AllowMultiple é responsável por selecionar mais de um arquivo quando esta setado para true.







2º Preparar o code behind (F7)



Para fazer o upload de vários arquivos é preciso fazer um laço de repetição, nesse caso, estaremos utilizado o for.



O c# guarda os arquivos do controle fileupload em Context.Request.Files.





Feito isso, precisamos tratar um arquivo de cada vez, então, utilizaremos a classe HttpPostedFile que contém as propriedades: nome do arquivo, tamanho, mime type e o arquivo em si.



A seguir um exemplo: 






protected void btnSalvar_Click(object sender, EventArgs e)
        {
            try
            {
                for (int i = 0; i < Context.Request.Files.Count; i++)
                {
                    HttpPostedFile file = Context.Request.Files[i];
                    string nome = file.FileName;
                    const string endereco = @"c:\tmp\";
                    file.SaveAs(endereco + nome);
                }

                lblMensagem.Text = "Salvo com sucesso";


            }
            catch (Exception ex)
            {
                lblMensagem.Text = "Houve um erro: " + ex.Message;
            }
        }






A segui uma vídeo aula.
















PrintScreen do tutorial.


















Visualizar




































        

      










Assinar:
Postagens (Atom)