swfupload详解

前提：

Ajax解决了不刷新页面提交表单，但是却没有解决文件上传不刷新页面，当然也有其它技术让不刷新页面而提交文件，该技术主要是利用隐藏的iFrame，较Ajax要麻烦许多，而且其提交方式依然在底层是使用的表单file，这里我们不详谈。而且如果是提交较小的文件，我们能接受，如果提交的文件较大，我们便要忍受很长的等待时间，而浏览器却没有任何提示，我们也没有办法知道文件上传的进度…

swfupload利用Flash自身的文件提交技术而无需刷新页面，而且能够获取文件上传进度，可以提交多个文件，而且还能控制上传文件的大小，类型等信息。

一：下载SWFUpload

下载地址：https://code.google.com/p/swfupload/downloads/list

下载完后解压到某个目录，我这里放在www.hongxiang100.com/swfu目录下，该目录可自行修改。需要保留目录下的swfupload.js,  Flash/swfupload.swf两个文件和plugins目录,其它的都可以删掉。

• swfupload.js: swfupload的js脚本，封装swfupload.swf的各种接口供js调用，简化操作。
• swfupload.swf: swfupload的核心所在，上传多个文件，提供上传进度，限制文件容量尺寸等提优于于上传表单功能的工具，实质是一个flash。
• plugins目录: swfupload的各种插件。其中swfupload.cookies.js用于解决ie中flash请求服务器时，请求头中不带cookie的bug。swfupload.queue.js插件提供更强大的上传队列功能，比如说取消队列等等。 swfupload.speed.js插件提供上传速度，上传剩余时间，以上传事件等信息。 swfupload.swfobject.js插件集成了swfobject库，用于将swfupload组件嵌入到dom中，而且新增了一个swfupload组件正在载入的事件。

二:配置（所有的配置都源于swfupload.js文件中的SWFUpload.prototype.initSettings 这个函数）

// Private: initSettings ensures that all the
// settings are set, getting a default value if one was not assigned.
SWFUpload.prototype.initSettings = function (userSettings) {
    this.ensureDefault = function (settingName, defaultValue) {
        var setting = userSettings[settingName];
        if (setting != undefined) {
            this.settings[settingName] = setting;
        } else {
            this.settings[settingName] = defaultValue;
        }
    };

    // Upload backend settings
    this.ensureDefault("upload_url", "");   //upload_url设置接收的是一个绝对的或者相对于SWF文件的完整URL。推荐使用完整的绝对路径，以避免由浏览器和FlashPlayer修改了基准路径设置而造成的请求路径错误，如http://www.hongxiang100.com/swfupload/upload.php
    this.ensureDefault("preserve_relative_urls", false);  //
    this.ensureDefault("file_post_name", "Filedata");    //类似于表单上传控件的name属性，默认值为Fileda，文件对象的名称,默认Filedata,后台接收就靠它识别(如$_FILES["Filedata"]获取上传）。这里不建议修改，因为在linux下的flash，无论怎么修改这个值，都没有效果。
    this.ensureDefault("post_params", {});   // 附加参数，可以自定义上传的其post他参数
    this.ensureDefault("use_query_string", false);  //该属性可选值为true和false，设置post_params是否以GET方式发送。如果为false，那么则以POST形式发送。

  /*

该属性可选值为true和false。如果设置为true，当文件对象发生uploadError时（除开fileQueue错误和FILE_CANCELLED错误），该文件对象会被重新插入到文件上传队列的前端，而不是被丢弃。如果需要，重新入队的文件可以被再次上传。如果要从上传队列中删除该文件对象，那么必须使用cancelUpload方法。

跟上传失败关联的所有事件同样会被一一触发，因此将上传失败的文件重新入队可能会和Queue Plugin造成冲突（或者是自动上传整个文件队列的自定义代码）。如果代码中调用了startUpload方法自动进行下一个文件的上传，同时也没有采取任何措施让上传失败的文件退出上传队列，那么这个重新入队的上传失败的文件又会开始上传，然后又会失败，重新入队，重新上传...，进入了无止境的循环。

*/

     this.ensureDefault("requeue_on_error", false);  this.ensureDefault("http_success", []);  //该数组可自定义触发success事件的HTTP状态值。200的状态值始终
会触发success，并且只有200的状态会提供serverData。当接受一个200以外的HTTP状态值时，服务端不需要返回内容。

this.ensureDefault("assume_success_timeout", 0);

    // File Settings
    this.ensureDefault("file_types", "*.*");  //限制上传的文件类型，这个是非常有用且重要的，默认值为*.*。另外当用户指向上传图片时可以设置为”*.jpg;*.jpeg;*.gif;*.png;*.bmp;”。另外有一点非常重要的就是，这里只是浏览器端限制了上传的文件类型，服务端依然要验证上传的文件类型，否则可能是很危险的。
    this.ensureDefault("file_types_description", "All Files");   //弹出文件选择框中，保存类型的描述
    this.ensureDefault("file_size_limit", 0);    // Default zero means "unlimited"，单位kb, 限制文件大小
    this.ensureDefault("file_upload_limit", 0);  //设置SWFUpload实例允许上传的最多文件数量，同时也是设置对象中file_queue_limit属性的上限。一旦用户已经上传
成功或者添加文件到队列达到上最大数量，那么就不能继续添加文件了。特殊值0表示允许上传的数量无限制。只有上传成功（上传触发了uploadSuccess事件）的文件才会在上传数
量限制中记数。使用setStats方法可以修改成功上传的文件数量。
注意：该值不能跨页面使用，当页面刷新以后该值也被重置。严格的文件上传数量限制应该由服务端来检测、管理。
    this.ensureDefault("file_queue_limit", 0);   //允许队列存在的文件数量，默认值为0，即不限制。当文件队列中的文件数超过该值便不再允许添加文件。

    // Flash Settings
    this.ensureDefault("flash_url", "swfupload.swf");   //flash地址同upload_url，可以为相对于swf文件的地址或是域名地址
    this.ensureDefault("flash9_url", "swfupload_fp9.swf");   //flash9版本地址（考虑兼容性） 同upload_url，可以为相对于swf文件的地址或是域名地址
    this.ensureDefault("prevent_swf_caching", true);    //是否阻止flash缓存

    // Button Settings
    this.ensureDefault("button_image_url", "");     //上传按钮图片地址
    this.ensureDefault("button_width", 1);
    this.ensureDefault("button_height", 1);
    this.ensureDefault("button_text", "");
    this.ensureDefault("button_text_style", "color: #000000; font-size: 16pt;");
    this.ensureDefault("button_text_top_padding", 0);
    this.ensureDefault("button_text_left_padding", 0);
    this.ensureDefault("button_action", SWFUpload.BUTTON_ACTION.SELECT_FILES);
    this.ensureDefault("button_disabled", false);
    this.ensureDefault("button_placeholder_id", "");    //被替换的按钮位置id
    this.ensureDefault("button_placeholder", null);
    this.ensureDefault("button_cursor", SWFUpload.CURSOR.ARROW);   //鼠标状态，可选值见SWFUpload.CURSOR属性
    this.ensureDefault("button_window_mode", SWFUpload.WINDOW_MODE.WINDOW);   //flash中wmode的状态，可选择参考SWFUpload.WINDOW_MODE属性

    // Debug Settings
    this.ensureDefault("debug", false);
    this.settings.debug_enabled = this.settings.debug;    // Here to maintain v2 API

    // Event Handlers
    this.settings.return_upload_start_handler = this.returnUploadStart;
    this.ensureDefault("swfupload_preload_handler", null);
    this.ensureDefault("swfupload_load_failed_handler", null);
    this.ensureDefault("swfupload_loaded_handler", null);
    this.ensureDefault("file_dialog_start_handler", null);   //用户点击“选择文件”按钮，文件选择框弹出前会触发
    this.ensureDefault("file_queued_handler", null);
    this.ensureDefault("file_queue_error_handler", null);
    this.ensureDefault("file_dialog_complete_handler", null);

    this.ensureDefault("upload_resize_start_handler", null);
    this.ensureDefault("upload_start_handler", null);   //用户点击上传按钮, swfupload响应并在上传前会触发uploadStart事件
    this.ensureDefault("upload_progress_handler", null);  //文件上传过程中会不停的触发uploadProgress事件
    this.ensureDefault("upload_error_handler", null);    //上传出错
    this.ensureDefault("upload_success_handler", null);  //上传成功
    this.ensureDefault("upload_complete_handler", null);  //文件上传完成，在upload_error_handler或者upload_success_handler之后触发

    this.ensureDefault("mouse_click_handler", null);
    this.ensureDefault("mouse_out_handler", null);
    this.ensureDefault("mouse_over_handler", null);

    this.ensureDefault("debug_handler", this.debugMessage);

    this.ensureDefault("custom_settings", {});

    // Other settings
    this.customSettings = this.settings.custom_settings;

    // Update the flash url if needed
    if (!!this.settings.prevent_swf_caching) {
        this.settings.flash_url = this.settings.flash_url + (this.settings.flash_url.indexOf("?") < 0 ? "?" : "&") + "preventswfcaching=" + new Date().getTime();
        this.settings.flash9_url = this.settings.flash9_url + (this.settings.flash9_url.indexOf("?") < 0 ? "?" : "&") + "preventswfcaching=" + new Date().getTime();
    }

    if (!this.settings.preserve_relative_urls) {
        this.settings.upload_url = SWFUpload.completeURL(this.settings.upload_url);
        this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);
    }

    delete this.ensureDefault;
};

配置例子：

var swfu = '';
$(document).ready(function(){
swfu = new SWFUpload({
flash_url:"http://test.phpcms.com/statics/js/swfupload/swfupload.swf?"+Math.random(),
upload_url:"http://test.phpcms.com/index.php?m=attachment&c=attachments&a=swfupload&dosubmit=1",
file_post_name : "Filedata",
post_params:{"SWFUPLOADSESSID":"1377135247","module":"content","catid":"14","userid":"1","siteid":"1","dosubmit":"1","thumb_width":"0",
"thumb_height":"0","watermark_enable":"1","filetype_post":"gif|jpg|jpeg|png|bmp","swf_auth_key":"5947af2aedec6caa158c89969aba7203","isadmin":"1","groupid":"8"},
file_size_limit:"2048",
file_types:"*.gif;*.jpg;*.jpeg;*.png;*.bmp",
file_types_description:"All Files",
file_upload_limit:"50",
custom_settings : {progressTarget : "fsUploadProgress",cancelButtonId : "btnCancel"},
button_image_url: "",
button_width: 75,
button_height: 28,
button_placeholder_id: "buttonPlaceHolder",
button_text_style: "",
button_text_top_padding: 3,
button_text_left_padding: 12,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
button_cursor: SWFUpload.CURSOR.HAND,
file_dialog_start_handler : fileDialogStart,
file_queued_handler : fileQueued,
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
});
})

三：回调函数

参考备注：

http://devilswrwr.blog.163.com/blog/static/65838670201271725934329/

官方网站：http://www.swfupload.org/（英文）

官方例子：http://demo.swfupload.org/（英文）

SWFUpload v2.2.0.1 手册: http://demo.swfupload.org/Documentation/（英文）

SWFUpload下载地址http://code.google.com/p/swfupload/downloads/list

手册地址：http://leeon.me/upload/other/swfupload.html#events