Uploading multiple photos with captions

Question

Uploading multiple photos with captions

Navigation

#1 by (1 votes)

5

I have a relationship problem between caption and photo during upload.

I'm uploading multiple photos and each photo has a caption. The code looks something like this

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);

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);

The problem I already identified, is in the photo counter, the for I do in javascript does not match the for I do in php . So the order of the photos that is passed via post is not the same as it is created in javascript. Causing the wrong relationship between description and photographer with the wrong photo

php javascript

asked by anonymous 03.04.2016 / 04:37

1 answer

Redirecting page jsp using SpringFramework Questions to implement a webservice

score 1 · Answer 1

To be clear, what happened is that if the user selects some files and closes the window to select files.And then he then realizes that he forgot some files and clicks to select them then.

What happens in this situation is quite simple. As the multiple selection field, if you choose something else, then the previous selection is removed.

So my solution to this was, 1st hide the input of multiple files with hide () method 2nd remove the input id 3rd create a new input with the id and the name of the old one and add it in 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);

final code

<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>

SOURCE: this link I clarified my doubts, but the solution used was not compatible with what I needed, so I created this other solution.