1

Hola comunidad tengo un problema con el control FileUpload ya que requiero personalizarlo y he intentado con Bootstrap 4 pero no me queda como esperaba. ¿Alguien podría orientarme?.

Gracias.

Mi codigo Html

 <div class="custom-file">                     
   <asp:FileUpload ID="SeleccionarArchivo" runat="server" 
     CssClass="custom-file-label" />   
 </div>   

introducir la descripción de la imagen aquí

2
  • a que te refieres con personalizarlo Commented el 29 mar. 2019 a las 23:42
  • Hola @MiguelZarate a aplicarle el estilo de Bootstrap 4 como se muestra en la imagen que publique. Pero Me sale con el botón de seleccionar Archivo.
    – SHINOBI
    Commented el 29 mar. 2019 a las 23:44

1 respuesta 1

1

Solo agregas las referencias y los elementos.

// nombre de archivo subido
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

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

Te refieres a tener una salida como esta supongo

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.