<div id="photo-editor">
<div>
<span id="image"></span> --------------------->>>> Aquí se muestra la imagen cargada con el código de más abajo.
</div>
</div>
<div>
<p>Selecciona una foto de tu equipo</p>
</div>
<div>
<script>
function watch_my_photo(image) {
document.getElementById(\'image\').innerHTML = "<img src=\'"+image+"\'>"
}
</script> --------->>>> Este script muestra la imagen seleccionada en el span de arriba.
<form action="upload_profile_photo.php" method="post" enctype="multipart/form-data"> ------------------>>>> Esto carga la imagen en una carpeta del servidor.
<input type="file" name="file" id="my_profile_photo" onChange="watch_my_photo(form.file.value)"> ----------->>>> Con esto se abre una ventana del pc donde seleccionas la foto y que debería mostrarse en el span de arriba antes de subirse al servidor.
</form>
</div>
Bueno, mi problema es que la foto seleccionada (con el input "file") no se muestra en el <span> de arriba, (El botón de enviar del "form" no lo he puesto, no es necesario ahora), me gustaría que el usuario viera la foto que ha seleccionado antes de guardarla en el servidor (Con el botón de enviar que no he puesto en este momento), sin embargo, la imagen si se sube, ya que aparece en el código:
<span id="image"><img src=".....fakepath\image.png"></span> ----->>>> Como verán aparece la imagen seleccionada en el código, más no en pantalla.
Pero, si yo mismo coloco: <span id="image"><img src="cloud.png"></span>
--------->>>> ("cloud.png" se encuentra guardado en el servidor, lo guarde manualmente) pues si aparece la imagen.
Total, alguien me da alguna idea, estaré aquí por si alguna pregunta, entiendo que es una explicación un poco compleja.
Agradezco sus respuestas.