0

Buenos días:

estoy intentando personalizar el input file de un formulario, pero cuando le pongo los estilos correspondientes, se modifica bien, cuando le doy para seleccionar el archivo se abre la ventana, pero cuando lo selecciono, luego no me aparece el nombre del archivo al lado del botón y no sé como hacerlo.

HTML

<div style="margin-left: 225px; margin-top: -65px;" id="carta_nominador_div">
     <label for="carta_nominador" style="color: #fff; background: #000; width: 142px; height: 52px;  border-radius: 100px;cursor: pointer;">
          <span class="iborrainputfile">ATTACH FILE</span>
     </label>
     <input type="file" name="carta_nominador" id="carta_nominador" class="inputfile inputfile-1" data-multiple-caption="{count} archivos seleccionados" multiple="">

    </div>

CSS

.iborrainputfile { font-size: 14px; font-weight: normal; position: absolute; margin-top: 17px; margin-left: 25px; }

.inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.inputfile-1 + label { color: #fff; background-color: #000; }
.inputfile + label { max-width: 80%; cursor: pointer; padding: 0.625rem 1.25rem; width: 142px;  border-radius: 25px; height: 52px; }

Cómo podría hacer para que me aparezca el nombre del archivo seleccionado?

Muchas gracias, un saludo

1 respuesta 1

2

Al ocultar el control del navegador, estás ocultando también la etiqueta interna en donde se muestra el nombre del fichero seleccionado. No se puede ocultar el componente de forma parcial por lo que podrías recuperar tu mismo el fichero seleccionado y mostrar en una etiqueta propia.

$("#carta_nominador").change(function(){
  var fichero_seleccionado = $(this).val();
  var nombre_fichero_seleccionado = fichero_seleccionado.replace(/.*[\/\\]/, ''); //Eliminamos el path hasta el fichero seleccionado
  $("#fichero_seleccionado").text(nombre_fichero_seleccionado);
});
.iborrainputfile { font-size: 14px; font-weight: normal; position: absolute; margin-top: 17px; margin-left: 25px; border: 1px solid grey; padding: 5px; background: lightgrey; }

.inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.inputfile-1 + label { color: black; background-color: #000; }
.inputfile + label { max-width: 80%; cursor: pointer; padding: 0.625rem 1.25rem; width: 142px;  border-radius: 25px; height: 52px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carta_nominador_div">
     <label for="carta_nominador" style="background: #000; width: 142px; height: 52px;  border-radius: 100px;cursor: pointer;">
          <span class="iborrainputfile">ATTACH FILE</span>
     </label>
     <span id="fichero_seleccionado">Seleccione un fichero</span>
     <input type="file" name="carta_nominador" id="carta_nominador" class="inputfile inputfile-1" data-multiple-caption="{count} archivos seleccionados" multiple="">
</div>

He modificado un poco los estilos para que se visualice correctamente. He añadido una etiqueta span con id='fichero_seleccionado' para mostrar el nombre del fichero seleccionado.

Lo que hacemos aquí es suscribirnos al evento change del control del fichero y recuperar el valor del componente para mostrarlo.

2
  • Muchas gracias, lo acabo de probar y ya me funciona, ahora solo tengo que darle unos pocos retoques ya que tengo varios input file en la misma ventana para que con 1 función localice el id que se está modificando, pero esto ya creo que lo tengo más facil
    – derek
    Commented el 3 nov. 2017 a las 12:17
  • Me alegro que te resultara útil. Suerte con el resto de inputs! ;)
    – frikinside
    Commented el 3 nov. 2017 a las 12:18

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.