Personalizar FileUpload de Asp:Net con Boostrap 4

publicado por: Anonymous

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

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

introducir la descripción de la imagen aquí

solución

Solo agregas las referencias y los elementos.

_x000D_

_x000D_

// nombre de archivo subido_x000D_
$(".custom-file-input").on("change", function() {_x000D_
  var fileName = $(this).val().split("\").pop();_x000D_
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);_x000D_
});

_x000D_

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">_x000D_
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>_x000D_
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>_x000D_
_x000D_
<form>_x000D_
  <div class="custom-file">_x000D_
    <input type="file" class="custom-file-input" id="customFile">_x000D_
    <label class="custom-file-label" for="customFile">seleccione archivo</label>_x000D_
  </div>_x000D_
</form>

_x000D_

_x000D_

_x000D_

Te refieres a tener una salida como esta supongo

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *