Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

sambuka

upload múltiplo de imagens com pre visualização

Por , em Javascript

Recommended Posts

sambuka    1

sambuka
Postado

Boa tarde galera.

Tenho o seguinte código para upload múltiplo de imagens e com pre visualização.

Porém tem 1 problema.

 

Vamos supor, vou la e seleciono uma imagem ai ela aparece certinho, agora quero selecionar outra junto com essa que já selecionei, vou la seleciono mais uma imagem ela aparece tbm ao lado da que ja tinha sido selecionada, porém apenas a que eu selecionei por ultimo fica dentro do valor do input file. Se eu seleciono 3 de uma vez ai fica certo, as 3 aparecem e ficam as 3 dentro do input file, se eu seleciono uma de cada vez apenas a ultima fica no value.

<form action='' id="formpost" enctype="multipart/form-data" method='post' name='reenvia'>
<div id="upimgpost" ><input type="file" id="filearepost" name="files[]" max="5" multiple /></div>
</form>

<section id="previmgpost" class="previmgpostoff">

</section>


<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
		  $("#previmgpost").removeClass("previmgpostoff");
		  $("#previmgpost").addClass("previmgpost");
          var span = document.createElement('span');
          span.innerHTML = ['<img class="imagensup" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('previmgpost').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('filearepost').addEventListener('change', handleFileSelect, false);
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito