Como el título dice, este es un pequeño script que permite enviar y/o subir multiples archivos
al estilo de GMail, éste script utiliza PHP como lenguaje del lado del servidor, javascript para crear nuevos elementos HTML en la página y para el envío del mail se utiliza PHP Mailer que permite adjuntar archivos de una manera muy sencilla.

Primero se definen los elementos necesarios para poder enviar el mail

<form name="frm" id="frm" action="" method="post" enctype="multipart/form-data">
        <dl>
                <dt><label for="to" accesskey="1">Para</label></dt>
                <dd><input type="text" name="to" id="to" size="60" /></dd>
               
                <dt><label for="from" accesskey="2">De</label></dt>
                <dd><input type="text" name="from" id="from" size="60" /></dd>
               
                <dt><label for="sbj" accesskey="3">Asunto</label></dt>
                <dd><input type="text" name="sbj" id="sbj" size="60" /></dd>
               
                <dt><label for="msg" accesskey="4">Mensaje</label></dt>
                <dd><textarea id="msg" name="msg" rows="7" cols="45"></textarea></dd>
               
                <dt><label>Archivos Adjuntos:</label>   <a href="#" onclick="addField()" accesskey="5">Añadir Archivo</a></dt>
                <dd><div id="files"></div></dd>
                <dd><input type="submit" value="Enviar" id="postback" name="postback" accesskey="6" /></dd>
   </dl>
</form>

La siguiente porción de código javascript, permite agregar y quitar elementos de tipo <input type=file> de manera dinámica, esta es una de las razones del título del artículo ;) 

<script type="text/javascript">
var numero = 0;

// Funciones comunes
c= function (tag) { // Crea un elemento
   return document.createElement(tag);
}
d = function (id) { // Retorna un elemento en base al id
   return document.getElementById(id);
}
e = function (evt) { // Retorna el evento
   return (!evt) ? event : evt;
}
f = function (evt) { // Retorna el objeto que genera el evento
   return evt.srcElement ?  evt.srcElement : evt.target;
}

addField = function () {
   container = d('files');
   
   span = c('SPAN');
   span.className = 'file';
   span.id = 'file' + (++numero);

   field = c('INPUT');   
   field.name = 'archivos[]';
   field.type = 'file';
   
   a = c('A');
   a.name = span.id;
   a.href = '#';
   a.onclick = removeField;
   a.innerHTML = 'Quitar';

   span.appendChild(field);
   span.appendChild(a);
   container.appendChild(span);
}
removeField = function (evt) {
   lnk = f(e(evt));
   span = d(lnk.name);
   span.parentNode.removeChild(span);
}
</script>

Finalmente viene el código del lado del servidor, que maneja los datos enviados
a través del formulario y hace el respectivo envío del mail a la dirección indicada

<?php 
	include_once('class.phpmailer.php');
	// Indica si los datos provienen del formulario
	$postback=isset($_POST['postback']) ? true : false;
	
	if ($postback) {
		extract($_POST);
		$mail = new phpmailer ();
		$mail -> From = $from;
		$mail -> FromName = "BuayaCorp"; # Puede obtenerse del formulario, por facilidad se hace de esta manera
		$mail -> AddAddress ($to);
		$mail -> Subject = $sbj;
		$mail -> Body = $msg;
		$mail -> IsHTML (true);
		$archivos = '';
		$msg = "Mensaje Enviado";
		
	   	if (isset ($_FILES["archivos"])) {
			$msg .= "<ul>";
			foreach ($_FILES["archivos"]["error"] as $key => $error) {
				if ($error == UPLOAD_ERR_OK) {
					$tmp_name = $_FILES["archivos"]["tmp_name"][$key];
					$name = $_FILES["archivos"]["name"][$key];
					$msg .= "<li>$name</li>";
					$name = uniqid('bc') . '_' . $name; # Generar un nombre �nico para el archivo
					$mail -> AddAttachment ($tmp_name, $name);
					/*
					Si se van a guardar los archivos en un directorio, deber�an descomentarse
					las siguientes l�neas, si se van a guardar los nombres 
					de los archivos en una base de datos, aqu� deber�a realizarse algo...					
				   	
					move_uploaded_file($tmp_name, "ruta/directorio/$name"); # Guardar el archivo en una ubicaci�n, debe tener los permisos necesarios
					*/
				} #if
	   		} # foreach
			$msg .= '</ul>';
		} # if
		if (!$mail -> Send ()){
			$msg = "No se pudo enviar el email";
		}
	}
?>

Dependiendo de las necesidades que cada uno de ustedes pueda tener, este script puede modificarse con suma facilidad y asi conseguir el objetivo deseado

Archivos Relacionados

  • Pueden descargar el ejemplo o verlo en funcionamiento aquí