Nesse post vamos utilizar um plugin do JQuery para fazer upload de múltiplos arquivos, para montar esse exemplo utilize o “jQuery Multiple File Upload Plugin” veja detalhes nesse link http://www.fyneworks.com/jquery/multiple-file-upload/# , com esse plugin você pode definir a quantidade máxima de arquivos que o usuário pode enviar ao servidor e o tipo de arquivo, importante salientar que as validações são feitas no Client portanto você deve fazer as mesmas validações no Server.

Você pode configurar o plugin de varias formas nos exemplos desse post vou utilizar HTML para definir as propriedades do plugin e no último exemplo vou utilizar JavaScript. Para todos os exemplos utilizei a View “Index” do Controller “Home”, antes de iniciar você deve baixar o plugin nesse endereço http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Download descompactá-lo e adicionar o arquivo “jquery.MultiFile.js” na pasta “Scripts” do seu projeto, feito isso você pode adicionar a framework JQuery e o plugin na View, veja o código da View "Index" abaixo.

Imagem 1 - Arquivos script do JQuery e JQuery Multiple File Upload Plugin.

Vamos ao primeiro exemplo veja o trecho de código abaixo.

Imagem 2 - Primeiro exemplo.

Nesse primeiro exemplo montei um formulário com apenas um input do tipo “file” e no atributo class passei o valor “multi”, para o plugin funcionar só preciso fazer isso é mais nada, sem sofrimento!

Para o submit funcionar corretamente o atributo enctype do form foi configurado com o valor “multipart/form-data” sem isso o arquivo não é enviado ao servidor, esse atributo é adicionado por esse trecho de código new {enctype=”multipart/form-data”} no Html.BeginForm Helper, veja o HTML gerado.

Imagem 3 - Html gerado pelo Html.BeginForm Helper.

No lado do servidor vou utilizar o Controller “Home” e vou adicionar a Action “FileUpload”, esse Action será utilizada em todos os exemplos, veja o código completo abaixo.

public ActionResult FileUpload()
{
    int arquivosSalvos = 0;
    for (int i = 0; i < Request.Files.Count; i++)
    {
        HttpPostedFileBase arquivo = Request.Files[i];

        //Suas validações ......

        //Salva o arquivo
        if (arquivo.ContentLength > 0)
        {
            string caminhoArquivo = Path.Combine(@"C:\ArquivosUpload",
                Path.GetFileName(arquivo.FileName));

            arquivo.SaveAs(caminhoArquivo);
            arquivosSalvos++;
        }
    }

    ViewData["Message"] = String.Format("{0} arquivo(s) salvo(s) com sucesso.",
        arquivosSalvos);
    return View("Index");
}

A Action “FileUpload” simplesmente percorre todos os arquivos submetidos ao servidor e salva os arquivos na pasta "C:\ArquivosUpload", note que não adicionei nenhuma verificação de tipo, mais em uma aplicação real isso seria imprescindível.

A aplicação já pode ser executada veja o resultado esperado na imagem abaixo.

Imagem 4 - Resultado esperado.

Note que você pode selecionar quantos arquivos quiser e também não existe restrição de tipo de arquivos, o plugin oferece suporte para solucionar esses problemas ,para isso você precisa apenas adicionar o atributo maxlength: para limitar a quantidade e accept: para definir os tipos permitidos, veja o exemplo no trecho de código abaixo.

Imagem 5 - Trecho de código com suporte a quantidade máxima e tipo.

O plugin também pode ser configurado via JavaScript, para esse exemplo adicione um input do tipo “file” com apenas o id conforme código abaixo.

Imagem 6 - Trecho de código para ser configurado via JavaScript.

Agora precisamos adicionar o código JavaScript para definir as configurações do plugin ,adicione um novo arquivo JavaScript dentro da pasta “Scripts” da sua aplicação, o código do arquivo esta definido abaixo.

$(document).ready(function() {
    $('#Exemplo3').MultiFile({
            accept: 'gif|jpg',
            max: 3,
            STRING: {
                remove: 'Remover',
                denied: 'Tipo do arquivo inválido $ext!',
                duplicate: 'Esse arquivo já foi selecionado:\n$file!'
            }
    });
});

No trecho de código acima utilizo o JQuery para recuperar o input através do seu id “Exemplo3” ,  informo todas as configurações e também configuro as mensagens que serão exibidas para o usuário, eu adicione esse trecho de código em um arquivo .JS, se você fez o mesmo não se esqueça de adicionar o arquivo na View.

Conclusão

Fazer upload de múltiplos arquivos com esse plugin é realmente muito fácil, na pagina do plugin você encontra vários exemplos de configuração que você pode explorar e utilizar as melhores opções conforme sua necessidade, fonte desse exemplo em VB.NET ou C# .

Atualização 14/05/2010

Recebi um e-mail reportando um erro neste post, eu não defini o atributo “name” para os inputs do tipo “file” , e por causa disso o plugin não funciona corretamente em todos os browser, fica aqui o alerta defina o atributo name nos inputs e evite dor de cabeça!

Obrigado pelo feedback e até a próxima!

Daniel Fonseca Castro