PHP - Preview de tres imagenes

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>

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


uploader.php

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?

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>

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...

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?

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?

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[""]?

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

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.