SWFUploadIt is a file upload plugin that combines Flash and JavaScript, and its functionality is very powerful. I have used it several times in projects before, but its configuration parameters are too many. After using it once, I forget how to use it, and when I need it later, I have to go to the official website to read its documentation, which is really annoying. So I simply recorded its usage, which is also convenient for students with poor English to refer to. It benefits both myself and others, and solves the problem once and for all.

Features of SWFUpload

• 1. Upload with Flash, no page refresh, and the Flash button style can be customized;
• 2. Files to be uploaded can be restricted on the browser side;
• 3. Allows uploading multiple files at once, but there is an upload queue. Files in the queue are uploaded one by one. The server-side receives files in the same way as a normal form file upload;
• 4. Provides rich event interfaces for developers to use;

SWFUpload file upload process:

• 1. Include the corresponding JS file
• 2. Instantiate the SWFUpload object, passing a configuration parameter object for various configurations.
• 3. Click the Flash button provided by SWFUpload, and a file selection window pops up to select files to upload;
• 4. After file selection, the files that meet the requirements will be added to the upload queue;
• 5. Call the startUpload method to start uploading files in the queue;
• 6. During the file upload process, corresponding events are triggered. Developers use these events to update the UI, handle errors, show prompts, and so on;

SWFUpload consists of three parts: SWFUpload.js, swfupload.swf, initialization configuration parameters, and various event handling functions. So first include SWFUpload.js in the page

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

Then instantiate a SWFUpload object:

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(){}
...等等

We can see that implementing a SWFUpload upload function is very simple: just instantiate a SWFUpload object. But the troublesome part is the configuration parameter object used during instantiation, as well as the timing of various events and the parameters they provide. So here comes the key point. The following tables list the things commonly used in development. Although there are already quite a lot, they are not everything in SWFUpload. I have only listed the commonly used ones. For the complete documentation, please refer to the official SWFUpload website.

Common attributes and descriptions in the SWFUpload configuration parameter object

Explanation of various SWFUpload events

Methods of the SWFUpload instance

Most of the methods dynamically change the parameter configuration object.

File Information Object (File Object)

In event listener functions, the file information object is often used to obtain file information for the next step.

Queue Status Object (Stats Object)

Used to obtain the current status of the queue.

Some constants

Some constants defined by SWFupload for easier understanding.

Download URL

• SWFupload download address:https://code.google.com/p/swfupload/
• SWFUpload official documentation (version 2.5.0):http://www.w3cschool.cc/w3cnote/swfupload-document.html