Estoy tratando de mostrar una imagen seleccionada de la máquina local y necesito la ubicación de esa imagen para una función de JavaScript. Pero no puedo obtener la ubicación.
Para obtener la ubicación de la imagen, intenté usar console.log , pero no devolvió nada.
console.log(document.getElementById("uploadPreview"));
Aquí está el código HTML:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div align="center" style="padding-top: 50px"> <img align="center" id="uploadPreview" style="width: 100px; height: 100px;" /> </div> <div align="center" style="padding-left: 30px"> <input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> </div> <script type="text/javascript"> function PreviewImage() { var oFReader = new FileReader(); oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; console.log(document.getElementById("uploadPreview").src); }; } </script> </body> </html>
Salida de la consola:
Aquí está la advertencia:
DevTools no pudo cargar SourceMap: no se pudo cargar el contenido para chrome-extension://alplpnakfeabeiebipdmaenpmbgknjce/include.preload.js.map: error HTTP: código de estado 404, net::ERR_UNKNOWN_URL_SCHEME
Eso es porque Chrome agregó soporte para mapas de origen.
Vaya a las herramientas para desarrolladores ( F12 en el navegador), luego seleccione los tres puntos en la esquina superior derecha y vaya a Configuración .
Luego, busque Fuentes y deshabilite las opciones:
Si haces eso, eso eliminaría las advertencias. No tiene nada que ver con tu código. Consulte las herramientas de desarrollo en otras páginas y verá la misma advertencia.
Vaya a Herramientas para desarrolladores → Configuración → Consola → marque "Solo contexto seleccionado" . Las advertencias estarán ocultas. Puedes volver a verlos desmarcando la misma casilla.
El "solo contexto seleccionado" significa solo los contextos superior, iframe, trabajador y extensión. Que es todo lo que necesitará, la gran mayoría de las veces.
El archivo include.prepload.js tendrá una línea como la siguiente, probablemente como la última línea:
//# sourceMappingURL=include.prepload.js.map
Bórralo y el error desaparecerá.