html - formulario - input group bootstrap 3
La entrada del archivo bootstrap 4 no muestra el nombre del archivo. (6)
Tengo un problema con la clase de entrada de archivo personalizada en Bootstrap 4. después de elegir qué archivo quiero cargar, no se muestra el nombre de archivo.
Yo uso este código:
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02">
<label class="custom-file-label" for="inputGroupFile02">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-primary">Upload</button>
</div>
</div>
¿Alguna idea de cómo puedo arreglarlo sin complicarme demasiado?
Cuando tiene varios archivos, una idea es mostrar solo el primer archivo y el número de nombres de archivos ocultos.
$(''.custom-file input'').change(function() {
var $el = $(this),
files = $el[0].files,
label = files[0].name;
if (files.length > 1) {
label = label + " and " + String(files.length - 1) + " more files"
}
$el.next(''.custom-file-label'').html(label);
});
Debe usar javascript para mostrar el nombre del archivo elegido, como está escrito en la documentación: https://v4-alpha.getbootstrap.com/components/forms/#file-browser
Aquí puede encontrar la solución: Bootstrap 4 File Input
Ese es el código para tu ejemplo:
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile02"/>
<label class="custom-file-label" for="inputGroupFile02">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-primary">Upload</button>
</div>
</div>
<script>
$(''#inputGroupFile02'').on(''change'',function(){
//get the file name
var fileName = $(this).val();
//replace the "Choose a file" label
$(this).next(''.custom-file-label'').html(fileName);
})
</script>
</body>
</html>
Este código funciona para mí:
<script type="application/javascript">
$(''#elementID'').change(function(event){
var fileName = event.target.files[0].name;
if (event.target.nextElementSibling!=null){
event.target.nextElementSibling.innerText=fileName;
}
});
</script>
He utilizado los siguientes para el mismo:
<script type="application/javascript">
$(''input[type="file"]'').change(function(e){
var fileName = e.target.files[0].name;
$(''.custom-file-label'').html(fileName);
});
</script>
La respuesta de Anuja Patil solo funciona con una única entrada de archivo en una página. Esto funciona si hay más de uno. Este fragmento también mostrará todos los archivos si hay multiple habilitados.
<script type="text/javascript">
$(''.custom-file input'').change(function (e) {
var files = [];
for (var i = 0; i < $(this)[0].files.length; i++) {
files.push($(this)[0].files[i].name);
}
$(this).next(''.custom-file-label'').html(files.join('', ''));
});
</script>
Tenga en cuenta que $(this).next(''.custom-file-label'').html($(this)[0].files.join('', '')); No funciona. Por eso es necesario el bucle for .
Si nunca trabaja con varios archivos en la carga de archivos, se puede usar este fragmento de código más simple.
<script type="text/javascript">
$(''.custom-file input'').change(function (e) {
$(this).next(''.custom-file-label'').html(e.target.files[0].name);
});
</script>
Si lo desea, puede usar el complemento Bootstrap recomendado para dinamizar la entrada de su archivo personalizado: https://www.npmjs.com/package/bs-custom-file-input
Este complemento se puede usar con o sin jQuery y funciona con React an Angular