JavaScript - Cargar una imagen en la web con un input file

   
Vista:

Cargar una imagen en la web con un input file

Publicado por Chaver (3 intervenciones) el 22/01/2016 22:42:39
Quiero coger el src de una imagen desde un input file que y que se agregue a la celda de una tabla pero no lo consigo tengo este código con lo que he intentado pero no funciona

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
 
<head>
 
<script>
 
function crea(){
var tabla=document.getElementById("tabla");
var l=tabla.rows.length;
var fila=tabla.insertRow(l);
var celda1=fila.insertCell(0);
 
var imagen=document.createElement("img");
imagen.src=document.getElementById("imagen");
celda1.innerHTML=imagen;
 
 
}
 
</script>
 
</head>
 
<body><center><br><br>
 
<table width="300" border="1" bgcolor="yellow" bordercolor="red"id="tabla"><td bgcolor="green" width="141"><b>INSERTA IMAGEN</b></td></table>
IMAGEN:<input name="nombre" id="imagen" type="file"><br>
 
<input  name="boton" id="boton" type="button" value="INSERTAR" style='color: #003366; background-color: #99CCFF' onClick="crea()">
 
 
</center>
</body>
 
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Cargar una imagen en la web con un input file

Publicado por xve (1595 intervenciones) el 23/01/2016 12:04:30
Hola Chaver, esto que intentas hacer, creo que no es posible, ya que estas intentando mostrar una imagen que esta en el disco duro del usuario y que todavia no se ha enviado al servidor... creo que por temas de seguridad, esto no es posible.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Cargar una imagen en la web con un input file

Publicado por Vainas (239 intervenciones) el 23/01/2016 12:26:00
Buenas:

xve antes no pero ahora si, la pregunta es si tiene sentido...

Con la nueva API de js hay cosas como File y Blob con el que se pueden cargar imagenes que han sido seleccionadas por el usuario. Hablo de nueva API (no es tan nueva del todo) asi que hay navegadores antiguos que no funciona.

Que quieres hacer exactamente?. Digo por que hay otras formas tambien de hacer lo mismo y es por ejemplo subir la imagen al servidor por ajax o iframe y luego mostrarla. Si el usuario selecciona una imagen es para procesarla y desvolverla o bien subirla, procesarla, guardarla y desvolverla por ejemplo. Lo que quiero decir es que no se muestra una imagen del usuario sin mas y luego se borra.

Ya nos diras que quieres hacer.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Cargar una imagen en la web con un input file

Publicado por Chaver (3 intervenciones) el 23/01/2016 13:06:35
Screenshot_1 lo que quiero hacer es muy basico intentare explicarme lo mejor posible;insertar una imagen dentro del td...donde ahora pone [object HTMLImageElement] es para una practica de FP de Aplicaciones Web solo uno de mis compañeros lo ha conseguido y solo iba en internet eplorer....no iba ni en chrome ni firefox.Otra practica parecida pero en este caso con con un cuadro de texto si que funcionaba he intentado adaptar el codigo para la nueva pero ha sido en vano.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Cargar una imagen en la web con un input file

Publicado por Vainas (239 intervenciones) el 25/01/2016 09:23:26
Aqui tienes un ejemplo pequeño implementado en jQuery:

http://jsfiddle.net/alnitak/Qszjg/

y Aqui otro pero sin jQuery:

http://www.html5rocks.com/es/tutorials/file/dndfiles/ (A mitad de documento mas o menos esta el ejemplo para imagenes.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Cargar una imagen en la web con un input file

Publicado por Chaver (3 intervenciones) el 25/01/2016 19:19:59
Gracias a todos ya lo he solucionado un amigo me mando ese mismo enlace y me ha echado una mano con la función
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
 
function crea(){
 
 
// cogemos el id del input file usando el array de javascript files[0]
 var fileElem = document.getElementById("imagen").files[0];
 
                  //Después de obtener una referencia del input-file, crea instancias de un objeto FileReader para leer su contenido en memoria. Cuando finaliza la carga, se activa el evento onload del lector y se puede utilizar su atributo result para acceder a los datos del archivo
 
                var reader = new FileReader();
 
                reader.onload = function(event) {
 
var tabla=document.getElementById("tabla");
var l=tabla.rows.length;
var fila=tabla.insertRow(l);
var celda1=fila.insertCell(0);
 
 
var ruta=event.target.result
var imagen=document.createElement("img");
imagen.src=ruta;
imagen.width="249";
 
celda1.appendChild(imagen);
                                                 };
 
//FileReader.readAsDataURL(File): la propiedad result contendrá los datos del archivo/objeto codificados como una URL de datos.
 
                reader.readAsDataURL(fileElem); }
 
 
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar