Cargar imagen en pantalla mediante un type=file

futurama · #1 (**permalink**) 07/09/2005, 12:42

Hola a todos, tengo un problema de javascript que no se como solucionarlo, estoy intentando que mediante un elemento type=file cuando yo pulse abrir la imagen que he seleccionado se carge en un img en navegador, pero no se como hacerlo.

Si alguien pude ayudarme se lo agradeceria muchisimo.

Un saludo
Futurama

derkenuke · #2 (**permalink**) 07/09/2005, 19:30

Hola:

Un esbozo. Se puede mejorar comprobando que realmente sea una imagen, o lo que quieras. Tambien seria mas correcto eliminar el nodo creado y crear uno nuevo para evitar confusiones en la altura y anchura:

Código PHP:

  <html> 
<head></head> 
<body> 
 
 
<input type="file" id="selector" /><br/> 
<input type="button" value="verla" onclick="verla()"/> 
 
<script> 
var laImg; 
function verla() { 
    var eseErreCe=document.getElementById("selector").value; 
    if(eseErreCe!="") { 
        if(!laImg) { 
            laImg=document.createElement("IMG"); 
            laImg.src=eseErreCe; 
            document.body.appendChild(laImg); 
        } 
        else { 
            laImg.src=eseErreCe; 
        } 
    }     
} 
</script> 
 
</body> 
</html>

No lo he probado en firefox. En opera no funciona para la segunda imagen que se podria seleccionar. Seguramente se arregara borrando el nodo (si existiese), y creandolo cada vez que se le pulse al boton de "verla".

dehost · #3 (**permalink**) 27/01/2011, 16:11

necesito recojer la url con el nombre de la imagen para poder mostrar la imagen desde cualquier lugar, de antemano gracias

marlanga · #4 (**permalink**) 27/01/2011, 16:21

Ese código que te han puesto es parcialmente inútil. Primero has de subir la imagen al servidor.

Para ello, lo más fácil es poner un IFRAME OCULTO y hazlo como objetivo del formulario donde tengas en input file.
Es decir, tendrás un
<form...>
<input file .../>
<input submit />
</form>
<iframe></iframe>
Cuando aprietes a submit, se refrescará el iframe. Haz que el PHP del iframe, que se encarga de leer $_FILES y guardar el archivo subido en un directorio que especifiques, escriba el nombre del fichero junto a la ruta.

Con javascript, controla cuando el iframe se refresca, lee la ruta que se ha escrito en el iframe, y simplemente crea un objeto IMAGE, ponle de SRC lo que has leido del iframe, y añadelo con appenchild donde quieras. Para esto sí te vale parte del código ese que te han puesto arriba.