es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo cambiar el nombre de la etiqueta cuando se selecciona un archivo?

01 Aug, 2023 Programación

El código HTML es el siguiente:

<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 script JavaScript es el siguiente:

var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
    URL.revokeObjectURL(output.src) // libera memoria
}
};

Mi código puede mostrar la imagen seleccionada, pero también quiero cambiar el texto del etiqueta al nombre de la imagen seleccionada.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para cambiar el texto de la etiqueta al nombre de la imagen seleccionada, puedes modificar la función loadFile de la siguiente manera:

    var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {
        URL.revokeObjectURL(output.src); // liberar memoria
        document.getElementById('change').innerHTML = event.target.files[0].name; // establecer el texto de la etiqueta con el nombre de la imagen seleccionada
    };
};

    Aquí, estamos accediendo al nombre del archivo desde el elemento de entrada de archivos y estableciendo el innerHTML de la etiqueta con el ID “change” con ese nombre. Esto actualizará el texto de la etiqueta al nombre de la imagen seleccionada después de cargar la imagen.

Comments are closed.