1

Me encuentro con el problema de que al momento de obtener la URL de una imgagen al cargarla en el input file e imprimirlo en consola me da como resultado: fakepath + imagen, ¿cómo puedo obtener la direccion completa?

Anexo código:

function crearFotoDerecho() {
  //0.- Recuperar datos
  let datosImagen = document.getElementById("imgDer").value;
  alert(datosImagen);
}
<form>
  <div class="form-group">
    <label for="imgDer">Imagen Derecho</label>
    <input type="file" class="btn btn-dark" id="imgDer">
  </div>

  <button type="button" class="btn btn-primary" onclick="crearFotoDerecho()">
    Enviar Img Der
  </button>
</form>

2
  • 2
    La imagen no se ha subido al servidor y, por motivos de seguridad, los navegadores nunca te van a mostrar la ruta en el cliente. Edita la pregunta para explicar detalladamente lo que necesitas hacer con la imagen, que no sea obtener la ruta en disco. :-P
    – Triby
    Commented el 8 mar. 2021 a las 23:34
  • necesito que al dar click al boton, imprima la imagen que subo principalmente, lo del console solo lo uso para ver la ruta @Triby
    – miki
    Commented el 9 mar. 2021 a las 1:29

1 respuesta 1

2

Los navegadores no permiten que javascript pueda acceder a la pc (con mucha razón).

Si lo que necesitas son los metadatos de la imagen estan en document.getElementById("imgDer").files[0]. Tambien es muy común que lo que quieras sea obtener la url para mostrar un preview de la imagen, en ese caso tenes que usar la API FileReader de la siguiente manera:

function crearFotoDerecho(){
  //0.- Recuperar datos
  let file = document.getElementById("imgDer").files[0];  

  const reader = new FileReader();
      reader.addEventListener('load', (event) => {
      document.getElementById("imgPreview").src = event.target.result;
  });

  reader.readAsDataURL(file);
}
<form>
    <div class="form-group">
        <label for="imgDer">Imagen Derecho</label>
        <input type="file" class="btn btn-dark" id="imgDer">
    </div>        

    <button type="button" class="btn btn-primary"  onclick="crearFotoDerecho()" >Enviar Img Der</button>    
</form>

<img id="imgPreview"/>

2
  • Gracias!! me sirvio de mucho
    – miki
    Commented el 9 mar. 2021 a las 0:57
  • @miki si esta respuesta te ayudó a resolver el problema, no te olvides de marcarla como aceptada, para que la publicación quede completa. Lee sobre ¿Qué debo hacer cuando alguien contesta mi pregunta? para más información. Y completa el recorrido de bienvenida para aprender más sobre el sitio (y así ganarás una nueva medalla). Saludos.
    – Alvaro Montoro
    Commented el 9 mar. 2021 a las 1:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.