¿Cómo obtener la ruta completa de un archivo en HTML?
De todoexpertos.com; estoy realizando una hoja de vida para un proyecto con un formulario en php y javaScript, y necesito subir la foto de una persona en dicho formulario.
El problema es que no he podido obtener la ruta completa de la imagen para ponerla en un <img>, ya que con el tag <input type="file"> me obtiene solo el nombre y la extensión de la imagen.
Me gustaría saber ¿Cómo puedo obtener la ruta completa de la imagen para ponerla en la hoja de vida?
El problema es que no he podido obtener la ruta completa de la imagen para ponerla en un <img>, ya que con el tag <input type="file"> me obtiene solo el nombre y la extensión de la imagen.
Me gustaría saber ¿Cómo puedo obtener la ruta completa de la imagen para ponerla en la hoja de vida?
1 Respuesta
Respuesta de krlosnow
1
He estado investigando un poco sobre el asunto, y parece que no hay una solución javascript que funcione en todos los navegadores. La solución universal pasa por subir la imagen al servidor de forma temporal, y mediante ajax recuperar la imagen.
En algunas versiones del explorer sí que recuperaba la ruta entera con javascript, pero por motivos de seguridad esto ya no es así. Otros navegadores como Firefox tienen soluciones a medida con un objeto FileReader, pero no considero que sea una buena solución.
Yo tiraría por capturar el evento onchange del input type="file", y hacer un ajax submit a una php que guarde la imagen en un directorio temporal, y retorne un <img> apuntando a la imagen temporal. Este resultado ajax lo cargas en un div de previsualización. No se si conoces jquery, pero te lo recomiendo para hacer las llamadas ajax, y para muchas otras cosas. Respecto a jquery, te paso unos enlaces que te pueden ser de interés:
Tutorial básico de jquery: este es muy bueno. Te da una visión general de qué es jquery y cómo se usa. Entre otras cosas explica la función ajax() y load() de jquery, que es lo que te interesa ahora.
El método load de jquery : este tutorial se centra en la función load.
En algunas versiones del explorer sí que recuperaba la ruta entera con javascript, pero por motivos de seguridad esto ya no es así. Otros navegadores como Firefox tienen soluciones a medida con un objeto FileReader, pero no considero que sea una buena solución.
Yo tiraría por capturar el evento onchange del input type="file", y hacer un ajax submit a una php que guarde la imagen en un directorio temporal, y retorne un <img> apuntando a la imagen temporal. Este resultado ajax lo cargas en un div de previsualización. No se si conoces jquery, pero te lo recomiendo para hacer las llamadas ajax, y para muchas otras cosas. Respecto a jquery, te paso unos enlaces que te pueden ser de interés:
Tutorial básico de jquery: este es muy bueno. Te da una visión general de qué es jquery y cómo se usa. Entre otras cosas explica la función ajax() y load() de jquery, que es lo que te interesa ahora.
El método load de jquery : este tutorial se centra en la función load.
