0

Como puedo mostrar los nombres de archivos que coge un input file o multiple y personalizarlos en css. lo que quiero conseguir es antes de subir los archivos al servidor que me aparezcan todos los archivos en una lista por si quiero borrar alguno. No se si lo tengo que hacer con jquery php o como..... adjunto una imagen.

<div class="add">
 <label for="file-input">
  <img src="img/add.png" width="35" height="35" alt="add">
 </label>
 <input id="file-input" type="file" multiple=""/>
</div>
<!-- fin del add -->
<div id="archivos">
 <div id="archivo">
  <div class="nombre_archivo">nombre del archivooooooooooooooooooooo
  <span class="tooltiptext"><?php echo $tooltip; ?> </span>
 </div>
 <div class="tamano_archivo">30mb</div>
 <div class="eliminar_archivo"><img src="img/eliminar.png" width="20" height="20" alt="eliminar"></div>

introducir la descripción de la imagen aquí

1
  • Qué cosas has intentado?
    – Julio
    Commented el 17 feb. 2020 a las 13:48

1 respuesta 1

1

Aquí tienes un ejemplo, obviamente se puede mejorar. Tus archivos se almacenan temporalmente en la variable archivosParaSubir.

var inputFile = $("#inputFile");
var listaDeArchivos = $("#listaDeArchivos");
var archivosParaSubir = [];

function actualizarListaDeArchivos() {
  let listaHtml = archivosParaSubir.map(function(item, index) {
    return `<li>
      ${item.name} 
      <button data-index="${index}" class="file-list-eliminar">Eliminar</button>
    </li>`;
  });
  listaDeArchivos.html(listaHtml);
}

inputFile.on('change', function(e) {
  let files = e.target.files;
  
  if(files.length == 0) return;
  
  files = Array.from(files);
  archivosParaSubir = files;
  actualizarListaDeArchivos();
  $(this).val('');
});

$(document).on("click", ".file-list-eliminar", function() {
  let index = $(this).data('index');
  archivosParaSubir.splice(index, 1);
  actualizarListaDeArchivos();
});
#listaDeArchivos li{
  margin-bottom: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" name="" id="inputFile" multiple>

<ul id="listaDeArchivos">
</ul>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.