Por lo tanto, estoy tratando de hacer que mi entrada de carga de archivos se vea un poco mejor que los botones predeterminados. Todo va bien, sin embargo, parece que no puedo encontrar un script jQuery que pueda hacer lo que quiero que haga.
Lo que quiero que suceda es que, cuando no se selecciona un archivo, me gustaría que la etiqueta muestre "Choisir le recto", pero cuando se selecciona un archivo, me gustaría que muestre el nombre del archivo, es decir: "example. png" en lugar de "Choisir le recto".
$('input[type=file]').change(function() {
var filename = $(this).val().split('\\').pop();
var idname = $(this).attr('id');
console.log($(this));
console.log(filename);
console.log(idname);
$('span.' + idname).next().find('span').html(filename);
});
.btnsend {
display: block;
visibility: hidden;
position: absolute;
}
.labelbtn {
color: #fff;
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-color: #0057a0;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.labelbtn:hover {
opacity: 0.8;
background-color: #0072a0;
}
.sendall {
margin-top: 30px;
}
<form method="POST" enctype="multipart/form-data">
<input type="file" name="recto" id="recto" class="btnsend" />
<label for="recto" class="labelbtn"><span> Choisir le Recto</span></label>
<input type="file" name="verso" id="verso" class="btnsend" />
<label for="verso" class="labelbtn"><span>Choisir le Verso</span></label>
<input type="file" name="selfie" id="selfie" class="btnsend" />
<label for="selfie" class="labelbtn"><span>Choisir le Selfie</span></label> <br>
<input type="submit" name="submit" class="sendall">
El problema se debe a la forma en que intenta encontrar el span relevante en el DOM. Puede usar this word clave para referirse a la input que generó el evento de change , luego next() y find() desde allí:
$('input[type="file"]').on('change', function() {
var filename = $(this).val().split('\\').pop();
$(this).next().find('span').html(filename);
});
.btnsend {
display: block;
visibility: hidden;
position: absolute;
}
.labelbtn {
color: #fff;
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-color: #0057a0;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.labelbtn:hover {
opacity: 0.8;
background-color: #0072a0;
}
.sendall {
margin-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<form method="POST" enctype="multipart/form-data">
<input type="file" name="recto" id="recto" class="btnsend" />
<label for="recto" class="labelbtn"><span>Choisir le Recto</span></label>
<input type="file" name="verso" id="verso" class="btnsend" />
<label for="verso" class="labelbtn"><span>Choisir le Verso</span></label>
<input type="file" name="selfie" id="selfie" class="btnsend" />
<label for="selfie" class="labelbtn"><span>Choisir le Selfie</span></label> <br>
<input type="submit" name="submit" class="sendall" />
</form>