Upload Múltiplo

Upload Múltiplo

Opa!

Bem, Upload Múltiplo,  consiste em enviar mais de um arquivo, certo?
Isso, também está implícito  aí o fato de ter mais de um campo input/file para selecionar os arquivos.
Alguns colocam lá 10 campos para o usuário selecionar até 10 imagens/arquivos, poderia colocar mais?
Sim!
Não coloca porque ?
Imagine 30 campos para o usuário escolher os arquivos ? Detalhe, nem aparece totalmente o nome do arquivo porque pega o path inteiro, ex: c:minhasCoisasfotosaquelas_fotosDSG0030.jpg
De toda forma o cara se assusta com tantos campos e tem o fato de ele desistir de enviar uma delas,  para achar o campo que contém aquela foto indesejada ele precisa percorrer todo o caminho do path dentro do campo, enfim … eu acho chato mesmo.

Daí, resolvi escrever com o JQuery esse cara da imagem abaixo:

Bom, não é nada mais que os arquivos selecionados com a opção de remove-los!
Acontece que só tem um campo e o usuário pode escolher quantos arquivos quiser do mesmo campo (vou implementar um limitador, depois).

Resumidamente o que ocorre é que ao selecionar um arquivo o campo input/file fica invisível e um novo é criado em seu lugar.
A opção de remover elimina o elemento que contém tal imagem que desejas não enviar mais.

Exemplo de utilização:


<form name="f1" class="multiupload" action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="multiFile[]"  />
  <div id="list"></div>
  <button>Upload</button>
 </form>

Basta adicionar a classe multiupload no form e adicionar a div (list), só!

Obs: Não é upload com ajax, é apenas a seleção dos arquivos, você vai utilizar normalmente o arquivo de upload com suas validações e tudo mais, esse cara aí apenas permite selecionar os arquivos de um único campo.

Demo: Multi Upload
Download: Multi Upload JQuery

Abraços

Comments

  1. By paulo

    Responder

  2. Responder

  3. Responder

    • Responder

    • Responder

  4. By Elcio

    Responder

  5. By Elcio

    Responder

  6. By claudionei

    Responder

    • Responder

Perguntas duplicadas ou cujo a resposta esteja nos comentários serão ignoradas.
Comentários com códigos serão ignorados(para isso, use o pastebin.com e informe aqui o link).
Faça sua pergunta e "aguarde" ser aprovada para aparecer no blog.
Aguarde sua resposta, ela não é em tempo real, tenha paciência!

Deixe seu comentário