Tenho o seguinte formulário de upload customizado:
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:
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 } ?>