Formulario de contacto en Flash con adjunto

  Compatibilidad del artículo: ActionScript 3.0.   

Enviar un formulario en Flash con un fichero adjunto, se realiza de forma parecida a como se haría sin fichero, sólo que en vez de realizar la petición con URLLoader, se debería usar FileReference.

El ejemplo mostrado, se basa en el artículo Formulario de contacto en Flash, añadiéndole un campo para cargar el archivo. Se hacen los siguientes pasos:
  1. Se inician las variables a modificar. Estas variables, deben tener los parámetros correctos:
    1. asTexts: Es un array con los nombres de los campos de texto a enviar.
    2. sURL: Contendrá la dirección de la página donde se cargará el formulario.
    3. sMAX_TAM_FIC: Contendrá el tamaño máximo que podrá tener el fichero a adjuntar.
  2. Se inicia la variable de control para saber si se tiene un fichero cargado valido (gbFicheroValido) a false.
    Se inicia la variable de envio (URLLoader) con sus eventos para enviar el formulario sin adjuntos.
    Se inicia la variable de fichero (FileReference) con sus eventos para enviar el formulario con adjuntos.
    La llamada a onEnvError se repite en ambas y la llamada a onEnvCompleto, se hace recubriendo con una función, para poder pasar el resultado de la petición, que dependiendo de un método u otro, cambia de donde cogerlo.
    Por último, se establecen los botones y sus eventos.
  3. La función selecFichero, crea diferentes variables de filtros para la carga del archivo y por último, ejecuta el dialogo de selección de fichero (fichero.browse)
  4. La función resetForm, reiniciará, todos los elementos pasados por asTexts, además del campo de texto de información de fichero (txt_fic). También establece gbFicheroValido a false.
  5. La función enviarForm:
    1. Crea la variable de la petición URL y la variable "variables", que contendrá los valores de los campos pasados en asTexts, con su nombre y el valor introducido por el usuario.
    2. Establece los valores de los parámetros a pasar (con decode) con la forma "nombre_campo=valor_campo", comprobando que al menos se pase un valor (bPasa).
    3. En caso de pasarse un fichero valido, lo envía, junto con los datos del formulario.
      En caso de no pasarse un fichero a adjuntar, comprueba que se haya pasado algún valor y envía la petición. En caso contrario, devuelve error.
  6. La función onEnvCompleto, Comprueba que recibe el texto "OK" (debe devolver OK para ser considerado correcto, si fuera otro texto, se debería cambiar ahí), para devolver que se ha procesado correctamente (y resetear el formulario), o en caso contrario, informar que ha habido un error.
  7. La función onEnvError, salta en caso de haber un error en la petición, por lo que muestra un mensaje de error.
  8. La función onFicSeleccion, salta al seleccionar el usuario un fichero. Comprueba que el tamaño no exceda el máximo especificado y carga el fichero.
  9. La función onFicProgreso, salta periódicamente mientras que el fichero se carga, ya sea de la máquina del usuario al flash, o bien del flash al servidor. Informa del proceso de carga del fichero.
Al igual que en el artículo anterior, para tratar los ficheros enviados, se necesita de una aplicación que se ejecute en el servidor, para este ejemplo se ha utilizado el código del artículo Enviar un formulario por correo electrónico con adjuntos (php). Reemplazando solamente la línea:

echo "Su formulario ha sido enviado con exito";

Por:

echo "OK";

El ejemplo mostrado en este artículo devolverá error, ya que para evitar Spam, se apunta a una página inexistente.


ActionScript:
import flash.events.Event;

// Copyright © McAnam.com
// http://www.mcanam.com/articulos/Flash.php?id=9

// VARIABLES A MODIFICAR (INI)

// Array con los nombres de los campos de texto a enviar
const asTexts:Array = new Array("Nombre",
                                "Apellidos",
                                "Email",
                                "Texto");
                            
// Dirección a la que realizar el envío del e-mail
const sURL:String = "http://[www.tupagina.com]/directorio/pagina_mail.php";

// Tamaño máximo del fichero a cargar (en Bytes)
// 1 KiloByte = 1024 / 1 MegaByte = 1024KB
const sMAX_TAM_FIC = 2 * 1024 * 1024; // 2 Megas

// VARIABLES A MODIFICAR (FIN)

var gbFicheroValido = false;
var urlEnv:URLLoader = new URLLoader();
urlEnv.addEventListener(IOErrorEvent.IO_ERROR, onEnvError);
urlEnv.addEventListener(Event.COMPLETE, function(evt:Event){onEnvCompleto(urlEnv.data)});

var fichero:FileReference = new FileReference();
fichero.addEventListener(Event.SELECT, onFicSeleccion);
fichero.addEventListener(ProgressEvent.PROGRESS, onFicProgreso);
fichero.addEventListener(IOErrorEvent.IO_ERROR, onEnvError);
fichero.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, function(evt:DataEvent){onEnvCompleto(evt.data)});

btn_enviar.buttonMode=true;
btn_enviar.addEventListener(MouseEvent.CLICK, enviarForm);

btn_reset.buttonMode=true;
btn_reset.addEventListener(MouseEvent.CLICK, resetForm);

btn_fic.buttonMode=true;
btn_fic.addEventListener(MouseEvent.CLICK, selecFichero);

function selecFichero(evt:MouseEvent):void{    
    
    // Tipos de filtros de los ficheros que se pueden cargar
    var FicFiltrosTodos:FileFilter = new FileFilter("Todos", "*");
    var FicFiltrosImgs:FileFilter = new FileFilter("Imágenes", "*.jpg;*.jpeg;*.gif;*.png");
    var FicFiltrosDocs:FileFilter = new FileFilter("Documentos", "*.doc;*.docx;*.pdf;*.txt");

    fichero.browse([FicFiltrosTodos, FicFiltrosImgs, FicFiltrosDocs]);
    
    // Ejemplo sólo imágenes:
    // fichero.browse([FicFiltrosImgs]);
        
}

function resetForm(evt:MouseEvent):void{
    
    for (var id in asTexts) {
        var txtElem = getChildByName(asTexts[id]);
        txtElem.text = "";
    }
    
    txt_fic.text = "";
    gbFicheroValido = false;
    
}

function enviarForm(evt:MouseEvent):void{

    var bPasa:Boolean = new Boolean(false);
    
    // Inicialización de la petición
    var urlPeticion:URLRequest = new URLRequest(sURL);
    urlPeticion.method = URLRequestMethod.POST;
    
    Resultado.text = "";
    
    // Se crea variable, para enviar los valores del formulario
    var variables:URLVariables = new URLVariables();
    
    // Se recorren los campos designados para enviar con su nombre y valor
    for (var id in asTexts) {
        var txtElem = getChildByName(asTexts[id]);
        if (txtElem.text != "")
            bPasa = true;
        variables.decode(txtElem.name + "=" + txtElem.text);        
    }
    
    urlPeticion.data = variables;
    
    // Envío de petición
    if (gbFicheroValido)
    {
        // Se envía con fichero
        fichero.upload(urlPeticion);
    }
    else
    {
        // se envía sin fichero
        if (bPasa == true)
            urlEnv.load(urlPeticion);
        else
            Resultado.text = "Debe rellenar algún campo";
    }
    
}

function onEnvCompleto(txtRet:String):void{
    
    // Si recibe OK (de la página), se ha procesado con éxito
    if (txtRet == "OK")
    {
        Resultado.text = "Petición procesada corectamente";
        btn_reset.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
    }
    else
    {
        Resultado.text = "Se ha producido un error en la petición";
    }
    
}

function onEnvError(evt:Event):void{
    
    Resultado.text = "Error en la petición";
    
}

function onFicSeleccion(evt:Event):void{
    
    if (fichero.size < sMAX_TAM_FIC) {
        fichero.load();
        Resultado.text = "Cargando fichero ...";
    }
    else
    {
        Resultado.text = "Tamaño del fichero demasiado grande";
    }
    
}

function onFicProgreso(evt:ProgressEvent):void {
    
    if (evt.bytesLoaded < evt.bytesTotal)
    {
        // Se muestra progreso
        Resultado.text = "Cargando fichero: " +
                         evt.bytesLoaded + " / " + evt.bytesTotal +
                         "(" + int((evt.bytesLoaded / evt.bytesTotal) * 100) + "%)";
    }
    else
    {
        // Se ha cargado completamente
        Resultado.text = "Fichero cargado";
        txt_fic.text = fichero.name + " - " + int(fichero.size / 1024) + "KB";
        gbFicheroValido = true;
    }
}


Ejemplo:

Links relacionados:
Enviar un formulario por correo electrónico con adjuntos con PHP
Enviar un formulario por correo electrónico con PHP
Formulario de contacto en Flash
Pasar parámetros a la función dentro del addEventListener
Ejecutar JavaScript desde Flash por URL
Cargar y presentar variables de fichero externo
Formulario para enviar archivos al servidor (HTML)
Métodos de conexión HTTP


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com