PHP - Preview de tres imagenes

   
Vista:

Preview de tres imagenes

Publicado por Rosy (64 intervenciones) el 06/08/2011 01:43:30
Hola, estoy tratando de hacer una pagina donde el usuario final pueda subir tres imagenes, pero necesito que se muestren antes de hacer el submit, es decir, apenas seleccione una imagen se muestre inmediatamente la imagen, luego lo mismo con la segunda y tercera imagen.

Buscando en internet, encontre el codigo que realiza esto pero el ejemplo es solo para una imagen y no sé como modificarlo para que lo haga para las tres imagenes.

Aqui les dejo el codigo a ver si alguien me puede ayudar.

Archivo form.php
<script type="text/javascript">
function setpreview()
{
document.form1.target='null';
document.form1.action='uploader.php';
document.form1.submit();
}

function setsubmit()
{
document.form1.target='_self';
document.form1.action='archivo_que_procesa_tu_form';
document.form1.submit();
}

</script>

<form name="form1" action=" " method="post" enctype="multipart/form-data">
<div>Personalizar tu imagen: </div>
<div><input name="archivo" id="archivo" type="file" size="35" onChange="setpreview()"/></div>
<div><img src="file:avatar.png" id="picture" alt="vista previa" height="70" width="70"/> </div>
<div style="text-align:center;"><input type="submit" value="Crear Usuario" onclick="setsubmit()"/></div>
</form>
<iframe src="about:blank" name="null" style="display:none">



Archivo uploader.php
<?php
$carpeta="tmp/";
$name=$carpeta.basename($_FILES['archivo']['name']);
move_uploaded_file($_FILES['archivo']['tmp_name'],$name);
?>
<script type="text/javascript">
parent.document.getElementById('picture').src='<?php echo $name; ?>';
</script>
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

Preview de tres imagenes

Publicado por xve (5513 intervenciones) el 06/08/2011 19:09:22
Hola Rosy, la manera que he encontrado siguiendo tu código ha sido este... tambien he modificado, para que se adapte el tamaño de la imagen a la subida:

form.php
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
<html>
<head>
<script type="text/javascript">
function setpreview(id)
{
	form=eval("document.form"+id);
	form.target='iframe_null';
	form.action='uploader.php?id='+id;
	form.submit();
}
</script>
</head>
 
<body>
	<form name="form1" action="" method="post" enctype="multipart/form-data">
		<div>Personalizar tu imagen: </div>
		<div><input name="archivo" id="archivo" type="file" size="35" onChange="setpreview(1)"/></div>
		<div><img src="" id="picture1" alt="vista previa" height="0" width="0"/> </div>
	</form>
	<form name="form2" action="" method="post" enctype="multipart/form-data">
		<div>Personalizar tu imagen: </div>
		<div><input name="archivo" id="archivo" type="file" size="35" onChange="setpreview(2)"/></div>
		<div><img src="" id="picture2" alt="vista previa" height="0" width="0"/> </div>
	</form>
 
	<!-- iframe donde envia el formulario -->
	<iframe src="about:blank" name="iframe_null" style="display:none">
</body>
</html>


uploader.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
# Podemos especificar una carpeta donde copiar la imagen
$carpeta="";
$name=$carpeta.basename($_FILES['archivo']['name']);
# Coopiamos la imagen a nuestra carpeta con el nombre real
move_uploaded_file($_FILES['archivo']['tmp_name'],$name);
# Obtenemos la información de la imagen
$infoFile=getimagesize($name);
?>
<script type="text/javascript">
// Enviamos el nombre de la imagen al id picture de la pantalla de donde es llamado
parent.document.getElementById('picture<?php echo $_GET["id"];?>').src='<?php echo $name; ?>';
parent.document.getElementById('picture<?php echo $_GET["id"];?>').style.width='<?php echo $infoFile[0];?>px';
parent.document.getElementById('picture<?php echo $_GET["id"];?>').style.height='<?php echo $infoFile[1];?>px';
</script>
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

Gracias

Publicado por Rosy rosygahi@yahoo.es (64 intervenciones) el 06/08/2011 21:45:29
Muchas Gracias ....me resultó super bien
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

Gracias

Publicado por rosy rosygahi@yahoo.es (64 intervenciones) el 06/08/2011 22:04:50
Xve: me surgió solo una pregunta ¿por que cada <input name="archivo" id="archivo" type="file"> debe ir en etiquetas <form> diferentes ¿podrian ir todas en una sola?
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

me surgio un pequeño problemita

Publicado por rosy (64 intervenciones) el 06/08/2011 23:34:42
Hola, la felicidad me duro poco ya que habia probado el codigo de manera aislada, pero cuando lo inserte dentro del codigo de mi aplicacion no me resulto del todo. Necesito hacer el preview de cuatro fotos, y solo lo hace con tres, lo curioso es que la primera no sube. He mirado el codigo todo el día y ya no sé que podria estar pasando, a continuacion dejo el codigo para ver si otra persona ve donde pudiera estar el error. Muchas gracias por cualquier ayuda

NEWCART.PHP
<?php include("include/session.php"); ?>
<?php verificar_sesion() ?>
<?php require_once("include/connection_db.php"); ?>
<?php require_once("include/functions.php"); ?>
<script language="javascript" type="text/javascript">

function setpreview(id)
{
form=eval("document.form"+id);
form.target='null';
form.action='uploader.php?id='+id;
form.submit();
}

function valida_campos(form)
{
pais=document.f_datos.pais.value
ciudad=document.f_datos.ciudad.value
descrip=document.f_datos.descrip.value

if(pais=="")
{
alert("Debe ingresar el Pais")
window.document.f_datos.pais.focus();
return false;
}

if(ciudad=="")
{
alert("Debe ingresar el nombre de la ciudad")
window.document.f_datos.ciudad.focus();
return false;
}
if(descrip=="")
{
alert("Debe ingresar la descripcion de la ciudad")
window.document.f_datos.descrip.focus();
return false;
}
}
</script>
<?php
if(isset($_POST["bt_crear"]))
{
$pais = trim(preparar_consulta($_POST["pais"]));
$ciudad = trim(preparar_consulta($_POST["ciudad"]));
$descrip = trim(preparar_consulta($_POST["descrip"]));
$sw_foto = 0;
$foto = "";

if(is_uploaded_file($_FILES['archfoto1']['tmp_name']))
{
$foto = $_FILES['archfoto']['name'];
$fotoF = "./fotos/$foto";
if(move_uploaded_file($_FILES['archfoto']['tmp_name'],$fotoF))
{
//chmod($fotoF,0666);
$sw_foto = 1;
}
}

if($pais=="-1")
{
$mensaje = "Debe Seleccionar un Pais";
}

if ($foto != "" and $foto != null and $sw_foto == 1)
{
$consulta = "INSERT INTO destinos (
ciudad, nomarch, descripcion , id_pais
) VALUES (
'{$ciudad}', '{$foto}', '{$descrip}', '{$pais}')";
if( $resultado = mysql_query($consulta,$conexion) )
{
$mensaje = "El destino ha sido creado";
}
else
{
$mensaje = "No se ha podido crear un nuevo destino" . mysql_error();
}
}
else
{
$mensaje = "No se ha podido crear un nuevo destino.....problemas con el archivo foto";
}
}
?>
<?php include("include/header.php"); ?>

<table id="estructura">
<tr>
<td id="menu">
<a href="admin.php">Regresar al menú principal</a>
</td>
<td id="pagina">
<h2>Crear nuevo destino</h2>
<?php if(isset($mensaje)) { echo "<p>" . $mensaje . "</p>"; }?>

<form name="f_datos" action="newcat.php" method="POST" enctype="multipart/form-data">
<table>
<tr>
<td>Pais:</td>
<td><select name="pais">
<option value="" selected="selected">--Elija un Pais--</option>
<?php
$sql = "select * from pais";
$consulta=mysql_query($sql,$conexion);
while($row=mysql_fetch_array($consulta))
{?>
<option value=" <?php echo $row['id_pais']; ?> "> <?php echo $row['nombre_pais'];?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Ciudad:</td>
<td><input type="text" name="ciudad"/></td>
</tr>
<tr>
<form name="form1" id="form1" action="" method="post" enctype="multipart/form-data">
<td>Archivo Foto 1:</td>
<td><input type="file" name="archivo" id="archivo" onchange="setpreview(1)" /></td>
</form>
</tr>
<tr>
<form name="form2" action="" method="post" enctype="multipart/form-data">
<td>Archivo Foto 2:</td>
<td><input type="file" name="archivo" id="archivo" onchange="setpreview(2)" /></td>
</form>
</tr>
<tr>
<form name="form3" action="" method="post" enctype="multipart/form-data">
<td>Archivo Foto 3:</td>
<td><input type="file" name="archivo" id="archivo" onchange="setpreview(3)" /></td>
</form>
</tr>
<tr>
<form name="form4" action="" method="post" enctype="multipart/form-data">
<td>Archivo Foto 4:</td>
<td><input type="file" name="archivo" id="archivo" onchange="setpreview(4)" /></td>
</form>
</tr>
<tr>
<td>&nbsp;</td>
<td><img src="" id="picture1" alt="vista previa foto1" height="70" width="70"/>
<img src="" id="picture2" alt="vista previa foto2" height="70" width="70"/>
<img src="" id="picture3" alt="vista previa foto3" height="70" width="70"/>
<img src="" id="picture4" alt="vista previa foto4" height="70" width="70"/></td>
</tr>
<tr>
<td>Descripcion:</td>
<td><textarea rows="10" cols="30" name="descrip"></textarea></td>
</tr>
</table>
<input name="bt_crear" type="submit" value="Crear Destino" onclick="return valida_campos(this);" />
</form>
<iframe src="about:blank" name="null" style="display:none">
</tr>
</table>

UPLOADER.PHP
<?php
# Podemos especificar una carpeta donde copiar la imagen
$carpeta="tmp/";
$name=$carpeta.basename($_FILES['archivo']['name']);
# Copiamos la imagen a nuestra carpeta con el nombre real
move_uploaded_file($_FILES['archivo']['tmp_name'],$name);
# Obtenemos la información de la imagen
$infoFile=getimagesize($name);
?>
<script type="text/javascript">
// Enviamos el nombre de la imagen al id picture de la pantalla de donde es llamado
parent.document.getElementById('picture<?php echo $_GET["id"];?>').src='<?php echo $name; ?>';
//parent.document.getElementById('picture<?php echo $_GET["id"];?>').style.width='<?php echo $infoFile[0];?>px';
//parent.document.getElementById('picture<?php echo $_GET["id"];?>').style.height='<?php echo $infoFile[1];?>px';
</script>
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 xve

me surgio un pequeño problemita

Publicado por xve (5513 intervenciones) el 07/08/2011 09:51:55
Hola Rosy, no se ver que puede pasar... en principio parece que esta todo bien... la unica diferencia que veo, es que en el primero tienes puesto con el id:
<form name="form1" id="form1" action="" method="post" enctype="multipart/form-data">

Aunque yo diría que no tiene nada que ver...
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

me surgio un pequeño problemita

Publicado por rosy (64 intervenciones) el 08/08/2011 14:26:08
Si, en mi desesperacion por ver que podria ser, le agregué el id=form1 pero como dices no tiene nada que ver, ¿se estará produciendo algun problema por las etiquetas <form> anidadas?
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 xve

me surgio un pequeño problemita

Publicado por xve (5513 intervenciones) el 08/08/2011 22:07:07
Creo que ya he visto que te pasa.... abres este form: <form name="f_datos" action="newcat.php" method="POST" enctype="multipart/form-data"> y no lo cierras... tendrías que cerrarlo antes de abrir otro form.

Coméntanos, ok?
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

me surgio un pequeño problemita

Publicado por Rosy (64 intervenciones) el 10/08/2011 23:40:51
Bueno, tienes razon, yo no sabia que no es posible anidar las etiquetas <form>, ahora que las separe me resultó. Ahora me quedaron 4 etiquetas form, la principal <form name="f_datos"> y las otras que corresponden a cada archivo de foto,

Ahora donde pongo el boton submit para luego capturar los datos ¿que variables va a pasar para poder recibirlas con $_POST[""]?
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

me surgio un pequeño problemita

Publicado por AlfredoTauro alfredotauro@hotmail.com (3 intervenciones) el 10/08/2011 23:58:10
Cada una de las etiquetas FORM actua de manera independiente, por lo que en cada una deberas de tener un boton de submit, de otra manera para poder tener un solo FORM y con el capturar todos los datos, ejemplo:

Forma 1 [Un solo archivo]:

<form name="form1" id="form1" action="" method="post" enctype="multipart/form-data">
<td>Archivo Foto 1:</td>
<td><input type="file" name="archivo" id="archivo" onchange="setpreview(1)" /></td>
<td><input type="submit" name="Enviar" value="Enviar" />
</form>

Forma 2 [Varios Archivos]:

<form name="form1" id="form1" action="" method="post" enctype="multipart/form-data">
<tr>
<td>Archivo Foto 1:</td>
<td><input type="file" name="archivo" id="archivo" onchange="setpreview(1)" /></td>
</tr>
<tr>
<td>Archivo Foto 2:</td>
<td><input type="file" name="archivo2" id="archivo2" onchange="setpreview(2)" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="Enviar" value="Enviar" /></td>
</tr>
</form>

Otra opcion es por javascript y ajax
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

me surgio un pequeño problemita

Publicado por rosy (64 intervenciones) el 11/08/2011 14:06:46
Ok gracias, creo que voy a tener que seguir investigando y enviando preguntas al foro, estoy recien aprendiendo PHP y no quiero meterme con otros lenguajes como javascript y ajax.
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