1

Tenho o seguinte formulário de upload customizado:

inserir a descrição da imagem aqui

Quando vou tentar incluir arquivos na imagem 2 e 3, o nome do arquivo só aparece no campo da imagem 1. Vejam abaixo. Selecionei o campo da imagem 2 e o arquivo substituiu o arquivo do campo da imagem 1:

inserir a descrição da imagem aqui

O código que estou usando é:

<script src="js/jquery.min.js"></script>
      <script type="text/javascript">
             $(document).ready(function(){
               $('#browsebutton :file').change(function(e){
                  var fileName = e.target.files[0].name;
                  $("#label").attr('placeholder',fileName)
              });
            });
         </script>


     <?php
         for($imagem = 1; $imagem <= 10; $imagem++)
         {
      ?>
      <div class="form-group">
        <label for=""><i class="fas fa-caret-right"></i> Imagem <?php echo $imagem ?>:</label>
        <div class="input-group">
                <label id="browsebutton" class="btn btn-primary input-group-addon" for="my-file-selector" >
                    <input id="my-file-selector" name="Arquivo[]" type="file" style="display:none;">
                      <i class="fas fa-upload"></i> Arquivo
                </label>
                <input id="label" type="text" class="form-control" readonly="">
            </div>
      </div>
      <div class="form-group">
       <input type="text" class="form-control" name="Legenda[]" placeholder="Legenda da foto <?php echo $imagem ?>" value="">
      </div>
      <?php } ?>
1
  • É que vc está repetindo várias id's no laço. Com isso irá sempre pegar a primeira. Um ID é como um CPF, cada cidadão tem o seu diferente.
    – Sam
    Commented 26/12/2018 às 0:29

1 Resposta 1

3

Ao repetir id's o código sempre vai pegar o primeiro que achar. Por essa e por outras é incorreto repetir id's no HTML.

O que você pode fazer é adicionar a variável do laço $imagem em cada id, criando assim id's distintos, assim como fez no placeholder="Legenda da foto <?php echo $imagem ?>":

id="browsebutton<?php echo $imagem ?>"
id="my-file-selector<?php echo $imagem ?>"
id="label<?php echo $imagem ?>"

E no for da label também:

for="my-file-selector<?php echo $imagem ?>"

E o jQuery ficará:

$(document).ready(function(){
   $('[id^=browsebutton] :file').change(function(e){
      var fileName = e.target.files[0].name;
      $(this)
      .closest(".input-group")
      .find("[id^=label]")
      .attr('placeholder',fileName);
   });
});

O seletor [id^=browsebutton] irá pegar os elementos que possuem id que comecem com browsebutton, e o:

$(this)
.closest(".input-group")
.find("[id^=label]")
.attr('placeholder',fileName);

irá alterar o placeholder do elemento com o id que comece com label dentro da div.input-group do elemento.

Veja como ficaria:

$(document).ready(function(){
   $('[id^=browsebutton] :file').change(function(e){
      var fileName = e.target.files[0].name;
      $(this)
      .closest(".input-group")
      .find("[id^=label]")
      .attr('placeholder',fileName);
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for=""><i class="fas fa-caret-right"></i> Imagem 1:</label>
  <div class="input-group">
          <label id="browsebutton1" class="btn btn-primary input-group-addon" for="my-file-selector1" >
              <input id="my-file-selector1" name="Arquivo[]" type="file" style="display:none;">
                <i class="fas fa-upload"></i> Arquivo
          </label>
          <input id="label1" type="text" class="form-control" readonly="">
      </div>
</div>
<div class="form-group">
 <input type="text" class="form-control" name="Legenda[]" placeholder="Legenda da foto 1" value="">
</div>
      <div class="form-group">
  <label for=""><i class="fas fa-caret-right"></i> Imagem 2:</label>
  <div class="input-group">
          <label id="browsebutton2" class="btn btn-primary input-group-addon" for="my-file-selector2" >
              <input id="my-file-selector2" name="Arquivo[]" type="file" style="display:none;">
                <i class="fas fa-upload"></i> Arquivo
          </label>
          <input id="label2" type="text" class="form-control" readonly="">
      </div>
</div>
<div class="form-group">
 <input type="text" class="form-control" name="Legenda[]" placeholder="Legenda da foto 2" value="">
</div>
      <div class="form-group">
  <label for=""><i class="fas fa-caret-right"></i> Imagem 3:</label>
  <div class="input-group">
          <label id="browsebutton3" class="btn btn-primary input-group-addon" for="my-file-selector3" >
              <input id="my-file-selector3" name="Arquivo[]" type="file" style="display:none;">
                <i class="fas fa-upload"></i> Arquivo
          </label>
          <input id="label3" type="text" class="form-control" readonly="">
      </div>
</div>

1
  • 3
    Perfeito Sam. Obrigado!
    – user24136
    Commented 26/12/2018 às 9:46

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