SWFUploadEs un complemento de carga de archivos que combina Flash y JS, y sus funciones son muy potentes. Lo he usado varias veces en proyectos anteriormente, pero tiene demasiados parámetros de configuración; después de usarlo olvido cómo se usa, y cuando lo necesito más tarde tengo que ir al sitio web oficial a consultar su documentación, lo cual es muy molesto. Así que decidí registrar su uso, también para facilitar la consulta a los compañeros con mal inglés; beneficia a otros y a mí mismo, y es un esfuerzo de una vez para siempre.

Características de SWFUpload

• 1. Utiliza Flash para la carga, la página no se actualiza, y se puede personalizar el estilo del botón de Flash;
• 2. Se pueden aplicar restricciones a los archivos que se van a subir directamente en el lado del navegador;
• 3. Permite subir varios archivos a la vez, pero hay una cola de carga, y la subida de los archivos en la cola se realiza uno por uno; cuando el servidor recibe los archivos, es igual que la carga de archivos mediante un formulario normal;
• 4. Proporciona una gran variedad de interfaces de eventos para que los desarrolladores las utilicen;

Flujo de carga de archivos de SWFUpload:

• 1. Introducir el archivo JS correspondiente.
• 2. Instanciar el objeto SWFUpload, pasando un objeto de parámetros de configuración para realizar diversas configuraciones.
• 3. Hacer clic en el botón Flash proporcionado por SWFUpload; se abre la ventana de selección de archivos para elegir los archivos a subir;
• 4. Una vez completada la selección de archivos, los archivos que cumplan los requisitos se añaden a la cola de carga;
• 5. Llamar al método startUpload para que los archivos en la cola comiencen a subirse;
• 6. Durante el proceso de carga de archivos se activan los eventos correspondientes; los desarrolladores utilizan estos eventos para actualizar la interfaz de usuario, manejar errores, mostrar avisos, etc.;

SWFUpload incluye tres partes: SWFUpload.js, swfupload.swf, parámetros de configuración de inicialización y varias funciones de manejo de eventos. Por lo tanto, primero se introduce SWFUpload.js en la página.

<script src='SWFUpload.js.html'></script>

Luego se instancia un objeto SWFUpload:

var swfu;
     
window.onload = function () {
    var settings_object = {//定义参数配置对象
        upload_url : "http://www.swfupload.org/upload.php",
            flash_url : "http://www.swfupload.org/swfupload.swf",
            file_post_name : "Filedata",
            post_params : {
           "post_param_name_1" : "post_param_value_1",
           "post_param_name_2" : "post_param_value_2",
           "post_param_name_n" : "post_param_value_n"
            },
            use_query_string : false,
            requeue_on_error : false,
            http_success : [201, 202],
            assume_success_timeout : 0,
            file_types : "*.jpg;*.gif",
            file_types_description: "Web Image Files",
            file_size_limit : "1024",
            file_upload_limit : 10,
            file_queue_limit : 2,
 
            debug : false,
     
            prevent_swf_caching : false,
            preserve_relative_urls : false,
     
            button_placeholder_id : "element_id",
            button_image_url : "http://www.swfupload.org/button_sprite.png",
            button_width : 61,
            button_height : 22,
            button_text : "<b>Click</b> <span class="redText">here</span>",
            button_text_style : ".redText { color: #FF0000; }",
            button_text_left_padding : 3,
            button_text_top_padding : 2,
            button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,
            button_disabled : false,
            button_cursor : SWFUpload.CURSOR.HAND,
            button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
     
            swfupload_loaded_handler : swfupload_loaded_function,
            file_dialog_start_handler : file_dialog_start_function,
            file_queued_handler : file_queued_function,
            file_queue_error_handler : file_queue_error_function,
            file_dialog_complete_handler : file_dialog_complete_function,
            upload_start_handler : upload_start_function,
            upload_progress_handler : upload_progress_function,
            upload_error_handler : upload_error_function,
            upload_success_handler : upload_success_function,
            upload_complete_handler : upload_complete_function,
            debug_handler : debug_function,
    };
     
    swfu = new SWFUpload(settings_object);//实例化一个SWFUpload，传入参数配置对象
};
/*定义各种事件监听函数*/
function swfupload_loaded_function(){}
function file_dialog_start_function(){}
...等等

Vemos que implementar una función de carga con swfupload es muy sencillo: solo hay que instanciar un objeto swfupload. Pero lo engorroso está en el objeto de configuración de parámetros que se usa al instanciar, así como en el momento en que ocurren varios eventos y los parámetros que proporcionan. Así que aquí viene lo importante. Las siguientes tablas enumeran las cosas que se usan en el desarrollo; aunque ya son bastantes, no son todo swfupload; solo he enumerado las más comunes. Para ver la documentación completa, consulte el sitio web oficial de swfupload.

Propiedades comunes y descripciones en el objeto de parámetros de configuración de swfupload

Explicación de varios eventos de SWFupload

Métodos de la instancia de swfupload

La mayoría de estos métodos sirven para modificar dinámicamente el objeto de configuración de parámetros.

Objeto de información de archivo File Object

En las funciones de escucha de eventos, a menudo se utiliza el objeto de información del archivo para obtener la información del archivo y continuar con las siguientes operaciones.

Objeto de estado de la cola Stats Object

Se utiliza para obtener el estado actual de la cola.

Algunas constantes

Algunas constantes definidas por SWFUpload para facilitar la comprensión.

Dirección de descarga

• URL de descarga de SWFUpload:https://code.google.com/p/swfupload/
• Documentación oficial de SWFUpload (versión 2.5.0):http://www.w3cschool.cc/w3cnote/swfupload-document.html