文件上傳利器SWFUpload使用指南

SWFUpload是一個flash和js相結合而成的文件上傳插件，其功能非常強大。以前在項目中用過幾次，但它的配置參數太多了，用過后就忘記怎么用了，到以后要用時又得到官網上看它的文檔，真是太煩了。所以索性就把它的用法記錄下來，也方便英語拙計的同學查看，利人利己，一勞永逸。

SWFUpload的特點：

1、用flash進行上傳，頁面無刷新，且可自定義Flash按鈕的樣式;

2、可以在瀏覽器端就對要上傳的文件進行限制;

3、允許一次上傳多個文件，但會有一個上傳隊列，隊列里文件的上傳是逐個進行的，服務器端接收文件時跟普通的表單上傳文件是一樣的;

4、提供了豐富的事件接口供開發者使用;

SWFUpload的文件上傳流程是這樣的：

1、引入相應的js文件

2、實例化SWFUpload對象，傳入一個配置參數對象進行各方面的配置。

3、點擊SWFUpload提供的Flash按鈕，彈出文件選取窗口選擇要上傳的文件；

4、文件選取完成后符合規定的文件會被添加到上傳的隊列里；

5、調用startUpload方法讓隊列里文件開始上傳；

6、文件上傳過程中會觸發相應的事件，開發者利用這些事件來更新ui、處理錯誤、發出提示等等；

SWFUpload包括三部分的內容：SWFUpload.js、swfupload.swf、初始化配置參數及各種事件處理函數。所以首先在頁面引入SWFUpload.js

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

然后實例化一個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(){}

...等等

一、配置參數對象中的常用屬性及說明

二、各種事件說明

要實現與用戶的交互，靠的就是在這些事件上做文章了

三、swfupload實例的方法

方法中大多數是動態改變參數配置對象的方法

四、文件信息對象 File Object

在事件監聽函數中，經常要用到文件信息對象來獲取文件的信息以供下一步的操作

五、隊列狀態對象 Stats Object

用來獲取當前隊列的狀況

六、一些常量

定義的一些常量，便于理解

來自：http://my.oschina.net/MrMichael/blog/278806