Autor
Trabajo en una empresa de modelos, me pidieron un formulario para Casting, donde las aspirantes llenan datos de tipo personal(edad, fecha nacimiento, medidas, estatura. peso, etc.) además puse un campo de tipo:"file" para que las modelos pudieran subir alguna foto suya. El formulario se envía, la foto también, todo está correcto, el problema surge cuando mi supervisor me pide que sería mejor que hubieran varios campos para cargar imágenes, pero que estos aparezcan progresivamente, es decir cada vez que seleccionaron una imagen del PC, se active o se vea un nuevo Input debido a que las señoritas aspirantes suelen enviar más de una fotografía; ese es mi problema.
Lo que pensaba hacer es que cada vez que elijan una imagen se active o aparezca otro INPUT de tipo "file" para que mi visitante pueda continuar agregando imagenes, y cuando presione el boton enviar las envie todas. Aunque si alguién tiene algun javascript u otro script útil que permita cargar las imagenes conforme se van agregando sería bueno.
Aquí les dejo mis dos documentos, el HTML donde esta el form, y el PHP con el que interactúa, andenle, echenme una mano.
Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulario de Casting</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="EduForm/sexyforms.v1.1.mootools.min.js"></script>
<style type="text/css">
.tablita {
margin:0 auto;
}
.tablita td{
padding:0 13px;
}
tr.odd td {
background:#f1f7ff;
}
.tablita td.resaltar {
background:#F5F5E8;
}
.tablita a {
font-weight:bold;
}
.cuadrado {
float:left;
width:170px;
height:170px;
margin:10px;
border:1px solid #574331;
padding:5px;
background:#eee;
}
</style>
<script type="text/javascript">
window.addEvent('domready', function() {
$$(".sexyform input", ".sexyform select", ".sexyform textarea").each(function(el) {
el.DoSexy();
});
});
</script>
<link href="EduForm/sexyforms/vista/sexyforms-vista.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {color: #CC0000}
.style7 {color: #CC0000; font-size: 14px; font-weight: bold; font-family: Arial, "Comic Sans MS", "Kristen ITC"; }
.style8 {
font-size: 16px;
font-weight: bold;
color: #585858;
font-family: Arial, "Comic Sans MS", "Kristen ITC";
}
.style10 {
font-size: 11px;
font-family: Arial, "Comic Sans MS", "Kristen ITC";
}
-->
</style>
</head>
<body>
<table width="512" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><form enctype="multipart/form-data" id="form1" class="sexyform" name="form1" method="post" action="Casting.php">
<table width="511" height="681" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="45" colspan="2" class="style1"><div align="center" class="style8">Formulario de Casting</div></td>
</tr>
<tr>
<td width="217" align="left" valign="middle"><div align="justify" class="style7">Nombres y Apellidos:</div></td>
<td width="294" align="right" valign="middle"><label>
<input name="Nombre" type="text" class="sexy-input" id="Nombre" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style2"><div align="justify" class="style7">Lugar de Nacimiento:</div></td>
<td align="right" valign="middle"><label>
<input name="Nacimiento" type="text" class="sexy-input" id="Nacimiento" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style2"><div align="justify" class="style7">DNI:</div></td>
<td align="right" valign="middle"><label>
<input name="DNI" type="text" class="sexy-input" id="DNI" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style2"><div align="justify" class="style7">Dirección:</div></td>
<td align="right" valign="middle"><label>
<input name="Direccion" type="text" class="sexy-input" id="Direccion" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style2"><div align="justify" class="style7">Teléfono Fijo:</div></td>
<td align="right" valign="middle"><label>
<input name="Telefijo" type="text" class="sexy-input" id="Telefijo" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style2"><div align="justify" class="style7">Teléfono Móvil:</div></td>
<td align="right" valign="middle"><label>
<input name="Telemovil" type="text" class="sexy-input" id="Telemovil" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style2"><div align="justify" class="style7">E-mail:</div></td>
<td align="right" valign="middle"><label>
<input name="Email" type="text" class="sexy-input" id="Email" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style2"><div align="justify" class="style7">Estatura:</div></td>
<td align="right" valign="middle"><label>
<input name="Estatura" type="text" class="sexy-input" id="Estatura" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style7">Peso:</td>
<td align="right" valign="middle"><label>
<input name="Peso" type="text" class="sexy-input" id="Peso" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style2"><div align="justify" class="style7">Color de Ojos:</div></td>
<td align="right" valign="middle"><label>
<input name="Ojos" type="text" class="sexy-input" id="Ojos" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style2"><div align="justify" class="style7">Color de Cabello:</div></td>
<td align="right" valign="middle"><label>
<input name="Cabello" type="text" class="sexy-input" id="Cabello" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style2"><div align="justify" class="style7">Color de Piel:</div></td>
<td align="right" valign="middle"><label>
<input name="Piel" type="text" class="sexy-input" id="Piel" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style2"><div align="justify" class="style7">Medidas:</div></td>
<td align="right" valign="middle"><label>
<input name="Medidas" type="text" class="sexy-input" id="Medidas" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style2"><div align="justify" class="style7">Mencione su experiencia en anfitrionaje, modelaje y/o actuación.</div></td>
<td align="right" valign="middle"><label>
<textarea name="Experiencia" cols="30" rows="5" class="sexy-input" id="Experiencia"></textarea>
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style2"><div align="justify" class="style7">Talentos y Habilidades:</div></td>
<td align="right" valign="middle"><label>
<input name="Talentos" type="text" class="sexy-input" id="Talentos" size="35" />
</label></td>
</tr>
<tr>
<td align="left" valign="middle" class="style7">Adjuntar Fotografía:</td>
<td align="right" valign="middle"><label>
<input name="archivo_adjunto" type="file" class="sexy-button-input" id="Adjunto" size="20" />
<br />
<span class="style10">(Las imágenes no deben superar los 1024Kb)</span> </label></td>
</tr>
<tr>
<td align="left" valign="middle"> </td>
<td align="center" valign="middle"><label>
<input name="Enviar" type="submit" class="sexy-button" id="Enviar" value="Enviar" />
</label>
<label>
<input name="Limpiar" type="reset" class="sexy-button" id="button2" value="Limpiar" />
</label></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
y este es mi archivo Casting.php
Código:
<?php
//Este Script fue Desarrollado Por Eduardo Augusto - EduMI
//Este e-mail se envía a nosotros
$nombre = $_POST["Nombre"];
$nacimiento = $_POST["Nacimiento"];
$dni = $_POST["DNI"];
$direccion = $_POST["Direccion"];
$telefijo = $_POST["Telefijo"];
$telemovil = $_POST["Telemovil"];
$email = $_POST["Email"];
$estatura = $_POST["Estatura"];
$peso = $_POST["Peso"];
$ojos = $_POST["Ojos"];
$cabello = $_POST["Cabello"];
$piel = $_POST["Piel"];
$medidas = $_POST["Medidas"];
$experiencia = $_POST["Experiencia"];
$talentos = $_POST["Talentos"];
$fecha = date("d/m/Y");
$ip=ip();
//ARRANCAMOS ALMACENANDO TODAS LAS VARIABLES EN EL CUERPO DEL MENSAJE QUE SERÁ ENVIADO
$cuerpo = '
*** Formulario de Casting Enviado Desde La WEB***
------------------------------------------------------------
Nombres y Apellidos:
'.$nombre.'
Fecha de Nacimiento:
'.$nacimiento.'
DNI:
'.$dni.'
Dirección:
'.$direccion.'
Teléfono Fijo:
'.$telefijo.'
Teléfono Movil:
'.$telemovil.'
Email:
'.$email.'
Estatura:
'.$estatura.'
Peso:
'.$peso.'
Color de Ojos:
'.$ojos.'
Color de Cabello:
'.$cabello.'
Color de Piel:
'.$piel.'
Medidas:
'.$medidas.'
Mencione su experiencia:
'.$experiencia.'
Ip del Visitante:
'.$ip.'
Fecha de Envío:
'.$fecha.'
';
//EN ESTA PARTE CONFIGURAMOS LAS VARIABLES DEL ARCHIVO ADJUNTO.
// Nombre de la imagen
$archivo=$_FILES['archivo_adjunto']['name'];
// Ruta del archivo temporal
$temporal=$_FILES['archivo_adjunto']['tmp_name'];
//AQUI CONFIGURAMOS EL CUERPO DEL MENSAJE
if($temporal!='')
{
// Leer el adjunto
$buffer = implode("",file($temporal)); // Leer fichero
$buffer = chunk_split(base64_encode($buffer)); // Codificación en base64 y divido
// Cabeceras necesarias para enviar el mail
$cabecera = "MIME-version: 1.0\n";
$cabecera .= "From: Modelos Casting<info@webmodelos.com>\n";
$cabecera .= "Return-Path: adminweb@hotmail.com\n";
$cabecera .= "Content-type: multipart/mixed; ";
$cabecera .= "boundary=\"Message-Boundary\"\n";
$cabecera .= "Content-transfer-encoding: 7BIT\n";
$cabecera .= "X-attachments: $temporal";
// Mensaje de texto plano
$mensaje = "--Message-Boundary\n";
$mensaje .= "Content-type: text/plain; charset=UTF-8\r\n";
$mensaje .= "Content-transfer-encoding: 7BIT\n";
$mensaje .= "Content-description: Mail message body\n\n";
$mensaje .=$cuerpo;
// Adjuntar el fichero
$mensaje .= "\n\n--Message-Boundary\n";
$mensaje .= "Content-type: Binary; name=\"$archivo\"\n";
$mensaje .= "Content-Transfer-Encoding: BASE64\n";
$mensaje .= "Content-disposition: attachment; filename=\"$archivo\"\n\n";
$mensaje .= "$buffer\n";
$mensaje .= "--Message-Boundary--\n";
}
else
{
// Cabeceras necesarias para enviar el mail
$cabecera = "From: $form_nombre<$form_email>\n";
$cabecera .= "Return-Path: $email_admin\n";
// Mensaje de texto plano
$mensaje = $cuerpo;
}
// Función que permite conocer la IP del visitante
function ip()
{
if (isset($_SERVER['HTTP_X_FORWARDED_FOR']))
$ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
elseif (isset($_SERVER['HTTP_VIA']))
$ip = $_SERVER['HTTP_VIA'];
elseif (isset($_SERVER['REMOTE_ADDR']))
$ip = $_SERVER['REMOTE_ADDR'];
else
$ip = 'desconocida';
return $ip; // Devolver la IP
}
$destinatario = "algunmail@hotmail.com"; // Quien recibirá los corroes
$asunto = ":: Formulario De Casting Recibido!!!"; // tema del correo
mail($destinatario,$asunto,$mensaje,$cabecera) ;
?>
Bueno soy principiante en php, y este script lo armé con ayuda de algunos manuales, pero soy programador en VB.NET, así que no se me complica mucho entender ciertas cosas por si pensais que a lo mejor me vais a liar más.
Cuidense.
En línea
