Preview de imagen antes de subirla en Mozilla

southwind · #1 (**permalink**) 09/06/2004, 10:04

Hola.
Me gustaría realizar una previsualización de las fotos antes de subirlas (con el <input type="file" ...>) para el navegador Mozilla. En Explorer no tengo problema, pero en Mozilla soy incapaz de conseguirlo.
¿Me podeis ayudar?
Gracias.

PatomaS · #2 (**permalink**) 09/06/2004, 15:36

Hola

Si ya tienes un código funcionando, mejor lo pones aquí y así solo hay que revisarlo y hacer los cambios adecuados.

De hecho, mejor si nos pones la dirección web en la que podamos ver la página funcionando.

Suerte

Felicidad

caricatos · #3 (**permalink**) 09/06/2004, 16:36

Hola southwind y PatomaS:

Me parece que Carlitos puso como hacerlo en las FAQs de javascript (si fue otro usuario pido disculpas)

Es algo así como poner el value del input en un tag img (Yo hice algo así, pero recuerdo que había algún "poblema"... me parece que hay que poner en el enlace la "coletilla" file.

Saludos

southwind · #4 (**permalink**) 10/06/2004, 08:19

Si, en el FAQ viene, pero no funciona para Mozilla.
El código que viene en el FAQ es el siguiente:

<p>Selecciona una imagen</p>
<input type="file" onChange="document.imagen.src='file:///' + this.value"><br><br>
Vista previa:<br><br>
<img src="imagenpordefecto.gif" name="imagen">

Gracias.

caricatos · #5 (**permalink**) 10/06/2004, 17:56

Hola otra vez:

Sin duda funciona en Mozilla...

Tengo una página que hace lo que quieres y la puedes ver en este link: http://localhost/www.pepemolina.com/..._bd/index.html

Si vas a probarlo, no subas una imagen de mucho peso porque le puse limitaciones.

Tal vez no uses un formato que sirva.

Saludos

southwind · #6 (**permalink**) 11/06/2004, 08:49

He comprobado las web que me has dado, pero no es eso exactamente lo que quiero.
Lo que me interesa es que una vez pinchado en el botón browse (o examinar) que ha creado el <input type="file"...> y seleccionada la imagen, aparezca un preview de la misma antes de subirla. Mira el código que puse antes, el que venía en el FAQ; eso es exactamente lo que quiero.

Gracias.

Carlitos · #7 (**permalink**) 12/06/2004, 05:29

Hola.

Se me ocurre esto. Prueba a ver si funciona.

Código HTML:

<p>Selecciona una imagen</p> 
<input type="file" onChange="window.open('file:///' + this.value,'','width=300,height=300')">

living · #8 (**permalink**) 12/06/2004, 17:09

onChange en los tipo File sólo funciona en Explorer y de hecho creo que sólo en la versión 6. Podrías usar onFocus pero falla más que una escopeta de feria

caricatos · #9 (**permalink**) 13/06/2004, 03:40

Hola otra vez:

Después de unas pruebas hice esto que en mozilla funciona:

Código:

<html>
	<head>
		<script type='text/javascript'>
			var img = false;
			function ini(){
				if (img) document.body.removeChild(img);
				img = document.createElement("img");
				img.src = "File:///" + document.forms[0].fichero.value;
				document.body.appendChild(img);
			}
		</script>
	</head>
	<body >
		<form name=imagen >
			<input type=file name=fichero onclick="ini()" />
		</form>
	</body>
</html>

Con onclick en mozilla funciona bien, y en mi versión de explorer funciona con onchange...

Será cuestión de ver una forma de usar el evento que funcione en cada navegador... quizás generando el tag dinámicamente:

var evento = (document.all) ? "onchange" : "onclick";
document.write('<input type=file name=fichero on'; + evento + '="ini()" />');

Saludos

locko · #10 (**permalink**) 14/06/2004, 03:58

Cita:

Iniciado por caricatos

...

Tengo una página que hace lo que quieres y la puedes ver en este link: http://localhost/www.pepemolina.com/..._bd/index.html

...

sin el localhost casi mejor, no??

caricatos · #11 (**permalink**) 14/06/2004, 05:17

Cita:

Iniciado por locko

sin el localhost casi mejor, no??

locko: ¡Tienes toda la razón!

Pero ha sido fácil verlo ¡verdad!

URL correcta: http://www.pepemolina.com/archivos_bd/index.html

Saludos

chalchis · #12 (**permalink**) 19/07/2005, 23:10

el ejemplo de la url que mencionan arriba , la imagen es copiada y luego se muestra, supongo yo pero lo que se mencionan no lo hace a menos que la pagina la ejecutes localmente, copie esta rutina a mi sitio usando mozilla o firefox y no funcionan, no visualiza la imagen a enviar que se puede hacer.

<html>
<head>
<script type='text/javascript'>
var img = false;
function ini(){
if (img) document.body.removeChild(img);
img = document.createElement("img");
img.src = "File:///" + document.forms[0].fichero.value;
document.body.appendChild(img);
}
</script>
</head>
<body >
<form name=imagen >
<input type=file name=fichero onclick="ini()" />
</form>
</body>
</html>

Espero sus comentarios, amigos
saludos

chalchis · #13 (**permalink**) 20/07/2005, 08:43

Cita:

Iniciado por caricatos

Hola otra vez:

Después de unas pruebas hice esto que en mozilla funciona:

Código:

<html>
	<head>
		<script type='text/javascript'>
			var img = false;
			function ini(){
				if (img) document.body.removeChild(img);
				img = document.createElement("img");
				img.src = "File:///" + document.forms[0].fichero.value;
				document.body.appendChild(img);
			}
		</script>
	</head>
	<body >
		<form name=imagen >
			<input type=file name=fichero onclick="ini()" />
		</form>
	</body>
</html>

Con onclick en mozilla funciona bien, y en mi versión de explorer funciona con onchange...

Será cuestión de ver una forma de usar el evento que funcione en cada navegador... quizás generando el tag dinámicamente:

var evento = (document.all) ? "onchange" : "onclick";
document.write('<input type=file name=fichero on'; + evento + '="ini()" />');

Saludos

el ejemplo de la url que mencionan arriba , la imagen es copiada y luego se muestra, supongo yo pero lo que se mencionan no lo hace a menos que la pagina la ejecutes localmente, copie esta rutina a mi sitio usando mozilla o firefox y no funcionan, no visualiza la imagen a enviar que se puede hacer.

<html>
<head>
<script type='text/javascript'>
var img = false;
function ini(){
if (img) document.body.removeChild(img);
img = document.createElement("img");
img.src = "File:///" + document.forms[0].fichero.value;
document.body.appendChild(img);
}
</script>
</head>
<body >
<form name=imagen >
<input type=file name=fichero onclick="ini()" />
</form>
</body>
</html>

Espero sus comentarios, amigos
saludos
__________________
gerardo