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

html:
<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 ;)

javascript:
<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:
<?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í