HTML se da a continuación-
<input type="file" class="custom-file-input" accept="image/*" onchange="loadFile(event)" id="customFile"> <label class="custom-file-label" id="change" for="customFile">Choose File</label><br><br> <img width="150px" id="output" src="#"/>El guión se da a continuación-
var loadFile = function(event) { var output = document.getElementById('output'); output.src = URL.createObjectURL(event.target.files[0]); output.onload = function() { URL.revokeObjectURL(output.src) // free memory } };Mi código puede mostrar la imagen seleccionada pero también quiero cambiar el texto de la etiqueta al nombre de la imagen seleccionada
La lógica para cambiar el texto de la etiqueta se puede escribir en el evento de cambio. Verifique el siguiente fragmento de evento,
document.getElementById('customFile').onchange = function() { // code to change the label text var fullName = getFileName(document.getElementById('customFile').value); document.getElementById("change").innerHTML= fullName; }; var getFileName = function(fullPath) { if (!fullPath) return null; var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/')); var filename = fullPath.substring(startIndex); if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) { return filename.substring(1); } return null; }Para obtener más información sobre cómo obtener el nombre del archivo, consulte https://stackoverflow.com/a/857662/17542117
Var name = document.getElementById("customFile").value;Usar
document.getElementById("Change").innerHTML = nameCorrija la ortografía.