5

Estou com um problema de relacionamento entre a legenda e a foto durante o upload.

Eu estou fazendoo upload de multiplas fotos e cada foto possui uma legenda. O código esta mais ou menos assim

html

<!-- form via post-->
<input type="file" id="fotos" name="fotos[]" multiple/><br>
<!-- galeria gerado dinamicamente conforme é selecionado as fotos -->
<div id="galeria"></div>

javascript

//contador de fotos, aqui está o problema.
var qtdFotos=0;
function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object


  for (var i = 0, f; f = files[i]; i++) {

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

    f.id=qtdFotos;
    qtdFotos++;

    var reader = new FileReader();


    reader.onload = (function(theFile) {
      return function(e) {
        var image;


        image = '<div class="content-foto">';
           image += '<img id="foto'+theFile.id+'" class="thumb" src="'+e.target.result+'" ></img>';
           image += '<p>Descrição:</p>';
           //estou usando o contador de fotos aqui para diferenciar os nomes dos input, mas não está funcionando da forma que quero.
           image += '<input name="descricao_foto'+theFile.id+'" type="text"></input>';
           image += '<p>Fotógrafo:</p>';          
           image += '<input name="fotografo_foto'+theFile.id+'" type="text"></input>';
        image += '</div>';
        $('#galeria').append(image);            
      };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
}
document.getElementById('fotos').addEventListener('change', handleFileSelect, false);

inserir a descrição da imagem aqui

php

$fotos = array();
for($i=0;$i<count($_FILES['fotos']['name']);$i++){
    if($files["fotos"]["error"][$i] != 0)
        continue;
    $foto = new Foto();
    //aqui a descrição não está correspondendo com a foto.
    $foto->nome = $_FILES['fotos']['name'][$i];
    $foto->descricao = $_POST['descricao_foto'.$i] ;
    $foto->fotografo = $_POST['fotografo_foto'.$i] ;
    $foto->tmp_name = $_FILES['fotos']['tmp_name'][$i];
    $fotos[] = $foto;
}
salvarFotos($fotos);

O problema eu ja identifiquei, está no contador de fotos, o for que eu faço no javascript não corresponde com o for que eu faço no php.Pois a ordem das fotos que é passado via post não é a mesma que é criado no javascript. Causando o relacionamento errado entre descricao e fotografo com a foto errada

1
  • O código funciona sim, após teste o problema é outro, quando eu seleciono uma vez e abro a opção de selecionar denovo, as fotos da primeira seleção não são enviadas. só são enviadas as fotos da ultima seleção, ai acontece o problema de relacionamento, então ao abrir novamente a tela de seleção de fotos as que foram selecionadas antes sao substituidas.
    – Skywalker
    Commented 3/04/2016 às 20:28

1 Resposta 1

1

Para ser claro, o que aconteceu é que se o usuário seleciona alguns arquivos e fecha a janela de selelecionar arquivos.E depois ele então percebe que esqueceu alguns arquivos e clica para selecioná-los em seguida.

O que acontece nessa situação é bastante simples. Como o campo de seleção múltipla, se você escolher outra coisa, em seguida, a seleção anterior é removido.

Então a minha solução para isso foi, 1º esconder o input de multiplos arquivos com método hide() 2º remover o id do input 3º criar um novo input com com o id e o name do antigo e adicionar no html

  //esconde input e remove o id dele, pois nao vai mais ser usado
  $('#fotos').hide();
  $('#fotos').removeAttr('id');
  //cria outro input de multiplos arquivos com as msm informações do antigo
  var novoInput = '<input type="file" id="fotos" name="fotos[]" multiple/>';
  $('#selector').append(novoInput);
  //cria o evendo novamente para o input
  document.getElementById('fotos').addEventListener('change', handleFileSelect, false);

código final

<script>
var qtdFotos=0;
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;
    }

    f.id=qtdFotos;
    qtdFotos++;


    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        var image;


        image = '<div class="content-foto">';
           image += '<img id="foto'+theFile.id+'" class="thumb" src="'+e.target.result+'" ></img>';
           image += '<p>Descrição:</p>';
           image += '<input name="descricao_foto'+theFile.id+'" type="text"></input>';
        image += '</div>';
        $('#galeria').append(image);   

      };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
  //esconde input e remove o id dele, pois nao vai mais ser usado
  $('#fotos').hide();
  $('#fotos').removeAttr('id');
  //cria outro input de multiplos arquivos com as msm informações do antigo
  var novoInput = '<input type="file" id="fotos" name="fotos[]" multiple/>';
  $('#selector').append(novoInput);
  //cria o evendo novamente para o input
  document.getElementById('fotos').addEventListener('change', handleFileSelect, false);
}
document.getElementById('fotos').addEventListener('change', handleFileSelect, false);
</script>

FONTE: esse link me esclareu a minha duvida, mas a solução usada não era compativel com o que eu precisava, então eu criei essa outra solução.

1
  • Poderia postar a class fotos?
    – Igor Silva
    Commented 21/12/2016 às 12:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .