<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #filee{ visibility: hidden; } </style> </head> <body> <input type="file" name="" id="filee"> <button onclick= "ftn()" id="btn">Choose a File</button> <span id="filename"></span> <script type="text/javascript"> let file = document.getElementById('filee'); let btn = document.getElementById("btn"); let filename = document.getElementById("filename"); function ftn(){ file.click(); let value = file.value; filename.innerText = value; } </script> </body> </html>Este es mi código. Estoy obteniendo valor cuando hice clic en el botón por segunda vez. Quiero un valor en la etiqueta de intervalo de mi archivo cuando hago clic en el botón y lo abro. Esto da valor cuando hago clic nuevamente en un botón y me muestra el valor anterior del archivo. Gracias si entiendes mi punto
Querrás saber el nombre del archivo cada vez que lo subas al navegador. Eso significa que debe escuchar el evento de change en la entrada del archivo.
let file = document.getElementById('filee'); let btn = document.getElementById("btn"); let filename = document.getElementById("filename"); file.addEventListener('change', event => { const [file] = event.target.files filename.innerText = file.name; }); btn.addEventListener('click', () => { file.click(); }); #filee { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } <input type="file" name="" id="filee"> <button type="button" id="btn">Choose a File</button> <span id="filename"></span>