Uso la entrada de archivos personalizados de bootstrap, y esto es algo muy bueno, pero no sé cómo mostrar todos mis archivos cargados. Cada vez que intento seleccionar varios archivos y subirlos, todos pasados correctamente, excepto esto, en el formulario de entrada solo se muestra el primer archivo.

Código

<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>

Puedo agregar multiple = "" al código del formulario, pero ¿qué debo agregar para que todos los archivos para cargar aparezcan en la línea de entrada?

0
Potion 26 jul. 2020 a las 18:24

2 respuestas

La mejor respuesta

¿Es esto lo que quieres ver? No estoy seguro de cómo se comporta el atributo de valor en la entrada de archivo, pero definitivamente puede ver cada archivo en la propiedad de archivos de la entrada, así que acabo de crear una cadena a partir de él.

// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var files = Array.from(this.files)
  var fileName = files.map(f =>{return f.name}).join(", ")
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile" multiple>
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>
0
Tom Siegel 26 jul. 2020 a las 15:40

En jQuery puede acceder a FileObject a través de .prop('files') del elemento de entrada, consulte esta prueba a continuación

$("input").on("input", function() {
  var names = $(this).prop('files');
  for( var i = 0; i < names.length ; i++){
    console.log( names[ i ].name )
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile" multiple="multiple">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>
0
Kresimir Pendic 26 jul. 2020 a las 15:36