swfupload 多文件上传的属性与事件方法总结

SWFUpload的原理:
利用Flash选择文件后上传，通过Flash和JS交互，对整个过程进行控制——包括页面的DOM操作之类的，都可以通过JS来进行控制。
说白了，就是用Flash上传，JS操作DOM

使用时首先必须要初始化
var swfObject,paramsObject;
window.onload = function(){ swfObject = new SWFUpload(paramsObject); }
这个初始化做了很多事情，包括对SWFUpload生成的实例的参数等等。
所有的参数设置都在那个paramsObject参数中。 paramsObject其实是一个JSON格式的对象,该对象有一些属性。
upload_url:   文件上传的处理程序,就是说，你要在这个文件对上传这个动作进行定义，比如文件保存、重命名之类的，如果这个没有具体动作的话，文件不会在服务器上有任何踪迹（根本就不是FILE格式传递的。）
flash_url : 上传的Flash，用SWFUpload默认的就可以。具体位置具体解决。
file_post_name : 这个和upload_url有关系。这个设置后，在upload_url路径中，就可以用Request(“Filedata”)来获取上传的文件相关信息了。
file_types : “*.jpg;*.gif”, //允许上传文件类型
file_types_description: 选取文件时的描述
file_size_limit : “1024″, //可以上传文件的最大尺寸,单位可以是B、KB、MB、GB，如果没有单位，则默认是KB
file_upload_limit :最大可以上传文件数量 0为不限制
file_queue_limit :上传队列等待文件数的最大值
debug : false //是否调试模式
prevent_swf_caching : false,//在相关的swf文件增加随机参数以避免Flash被缓存（建议打开，Flash被缓存已经导致太多问题了）

button_placeholder_id : “element_id”, //Flash选择文件按钮的id,相应的DOM的ID元素会被替换成Flash上传按钮
button_image_url : //Flash上传按钮的图片
button_width:
button_height:
button_text :
button_text_style:
button_text_left_padding:
button_text_top_padding:
button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES 可以多选文件/ SWFUplaod.BUTTON_ACTION.SELECT_FILE 不可以多选文件
button_disable :false//按钮是否不可用
button_cursor : SWFUpload.BUTTON_CURSOR.HAND　//鼠标划过Flash按钮显示的光标状态
button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT

swfupload_loaded_handler : swfupload_loaded_function, //Flash按钮被加载好的时候执行的操作，可以为空。
file_dialog_start_handler : file_dialog_start_function, //打开文件选择选择窗口时触发的事件,默认方法fileDialogStart,可根据需要重载方法
file_queued_handler : file_queued_function, //文件成功选择后触发的事件，默认方法fileQueued(fileObject),可根据需要重载方法
file_queue_error_handler : file_queue_error_function, //文件选择失败后触发事件（类型不对、大小不对等等）,默认方法 fileQueueError(fileObject,errorcode,message)，可根据需要重载方法
file_dialog_complete_handler : file_dialog_complete_function,//文件选择窗口关闭时触发事件，默认方法 fileDialogComplete(number of selected files,number of queued files)，可根据需要重载方法

upload_start_handler : upload_start_function, //上传开始时触发事件，默认方法uploadStart(fileObject)，可根据需要重载方法
upload_progress_handler : upload_progress_function, //文件上传过程中触发事件，默认方法uploadProgress(fileObject,bytes complete,bytes all)，可根据需要重载方法
upload_error_handler : upload_error_function, //文件传输过程中出错触发事件，默认方法uploadError(fileObject,error code,message)，可根据需要重载方法
upload_success_handler : upload_success_function,//文件传输完成（仅仅是发送，不管服务器是否操作），默认方法 uploadSuccess(fileObject,serverdata)，可根据需要重载方法。其中serverdata表示服务器 upload_url返回的信息（Window服务器需要返回一个非空值，否则success和complete都不执行）
upload_complete_handler : upload_complete_function, //一个文件上传周期完成时触发（不管是否上传成功还是失败，都会触发） debug_handler : debug_function, //调试模式打开的时候，在页面的textArea中添加debug信息供调用。默认SWFUpload已经定义了debug(message)方法调 用，如有需要复写覆盖掉。
custom_settings : { custom_setting_1 : “custom_setting_value_1″, custom_setting_2 : “custom_setting_value_2″, custom_setting_n : “custom_setting_value_n”, } }//定义的变量主要是供各个handler函数使用。
PS:参数中的各个函数，都算是SWFUpload这个类的的成员函数。调用 SWFUpload的其他函数就可以直接用this.xxx()来调用。如果不是上述参数中的函数，需要调用SWFUpload的函数，比如上传开始的 startUpload()。如果你是在fileQueued函数中要上传，那么只需要执行this.startUpload()就可以了。如果你想在点 击Submit的时候进行上传，那么这个时候周期就不在SWFUpload执行中了（不属于上述任何一个handler），这时你要想上传就应该是指明某 个SWFUpload的实例，比如本篇应该是swfObject.startUpload();(具体理解成类就好了，一个是在类的内部调用，一种是类的 外部调用)

upload_success_handler:uploadSuccess SWFUpload的提交过程与表单无关，所以我们需要手动设置SWFUpload的对象进行startUpload();——这个方法是已经初始化的 SWFUpload对象具有的方法。操作才行。通常情况下，我们可以在表单的submit按钮上面添加一个onclick操作或者对表单增加一个 onsubmit操作，在执行相应的操作之前，先将SWFUpload对象中的文件先上传上去，在上传成功后，也就是 upload_success_handler被触发的时候，对页面的DOM进行操作，比对部分hidden元素进行赋值（不赋值，如何知道相应的上传结 果等乱七八糟的事情），然后表单提交的时候就直接带着这些hidden值就传过去了。 在整个过程中，上传和表单提交是两个完全不同的过程执行的操作（如果你把startUpload方法绑定到表单提交过程中的话，感觉是一个过程，但是本质 上还是两个过程——文件上传（包括对表单的部分hidden域进行赋值）和表单提交两个过程。） 所以我有个想法，干脆在file_queued_handler过程中就直接上传，也就是触发startUpload()方法，并且在 upload_success_handler事件中对隐藏域（hidden）赋值，一方面省去了最后一次性提交的麻烦，另一方面也较少了系统响应时间 （表单还是有一些时间填写的哦）。

 

由于SWF为utf8编码，乱码的时候要转换下

以下为例子

 

<script type="text/javascript">
        var swfu;
        window.onload = function () {
            swfu = new SWFUpload({
                // Backend Settings
                upload_url: "../applicationdemo/upload.php",
                post_params: {"PHPSESSID": "<?php echo session_id(); ?>"},

                // File Upload Settings
                file_size_limit : "2 MB",    // 2MB
                file_types : "*.jpg",
                file_types_description : "JPG Images",
                file_upload_limit : "0",

                // Event Handler Settings - these functions as defined in Handlers.js
                //  The handlers are not part of SWFUpload but are part of my website and control how
                //  my website reacts to the SWFUpload events.
                file_queue_error_handler : fileQueueError,
                file_dialog_complete_handler : fileDialogComplete,
                upload_progress_handler : uploadProgress,
                upload_error_handler : uploadError,
                upload_success_handler : uploadSuccess,
                upload_complete_handler : uploadComplete,

                // Button Settings
                button_image_url : "../applicationdemo/images/SmallSpyGlassWithTransperancy_17x18.png",
                button_placeholder_id : "spanButtonPlaceholder", //存放按钮的地方
                button_width: 180,
                button_height: 18,
                button_text : '上传',
        //        button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',
                button_text_top_padding: 0,
                button_text_left_padding: 18,
                button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
                button_cursor: SWFUpload.CURSOR.HAND,
               
                // Flash Settings
                flash_url : "../applicationdemo/swfupload.swf",

                custom_settings : {
                    upload_target : "divFileProgressContainer",
                    progressTarget : "fsUploadProgress2",
                },
               
                // Debug Settings
                debug: false
            });
        };
    </script>

 

<span id="spanButtonPlaceholder"></span>