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

 
Vista:
sin imagen de perfil

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
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cargar una imagen en la web con un input file

Publicado por xve (2100 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
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cargar una imagen en la web con un input file

Publicado por Vainas (258 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
sin imagen de perfil

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

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

Como guardar la ruta generada de la imagen en la bbdd

Publicado por Carlos Andrés (1 intervención) el 26/06/2019 07:33:30
Estimado como podria guardar la ruta de la imagen que se genero al hacer ese procedimiento, estoy intentando subir la ruta de una imagen a la bbdd sql server con asp.net mvc, procedimiento de almacenados y js, hasta el momento no me a resultado nada porque al guardar la imagen por la seguridad de chrome y de otros navegadores me guardan la ruta de la imagen pero codificada un ejemplo C:\fakepath\BBDDLogica.jpg estaria totalmente agradecido si me ayudas
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
sin imagen de perfil
Val: 18
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como guardar la ruta generada de la imagen en la bbdd

Publicado por Ivette (10 intervenciones) el 31/10/2019 16:03:50
Hola, tengo esta misma situacion C:\fakepathlogo.jpg, no puedo guardar el nombre normal, porfa me podrias ayudar...
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