1

Tengo un input file oculto por razones de diseño.

<label for="file" style="background: green;">Diseño bonito</label>
<input id="file" type="file" style="display:none;" multiple>

Lo que quiero lograr es que a un lado de mi botón se aparezca el número de archivos cargados en ese input file. De manera que si cargo dos archivos entonces aparezca:

Diseño bonito 2 archivos cargados

Alguna idea?

1 respuesta 1

1

Lo primero que debes hacer es lanzar el evento clic del input[file] con el metodo click() al dar clic en el div del diseño bonito. Esto hara que se muestre la ventana de seleccion de archivos. Luego debes de asignarle el evento change(fn) al input[file] que se ejecuta cuando el usuario selecciono los archivos de su directorio.

El elemento input[file] tiene una propiedad files con la cual puedes obtener el total de elementos seleccionados con la propiedad .length y asi mostrar cuando archivos el usuario selecciono en el diseño bonito:

 $("#file").change(function(){
    $("#seleccionar-archivos").text("Diseño bonito " + this.files.length + " archivos cargados");
 });
 
$("#seleccionar-archivos").click(function(){
  $("#files").click();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="file" id="seleccionar-archivos" style="background: green;color:white">Diseño bonito</label>

<input id="file" type="file" style="display:none;" multiple>

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.