前提:
Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame,较Ajax要麻烦许多,而且其提交方式依然在底层是使用的表单file,这里我们不详谈。而且如果是提交较小的文件,我们能接受,如果提交的文件较大,我们便要忍受很长的等待时间,而浏览器却没有任何提示,我们也没有办法知道文件上传的进度…
swfupload利用Flash自身的文件提交技术而无需刷新页面,而且能够获取文件上传进度,可以提交多个文件,而且还能控制上传文件的大小,类型等信息。
一:下载SWFUpload
下载地址:https://code.google.com/p/swfupload/downloads/list
下载完后解压到某个目录,我这里放在/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插件集成了库,用于将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});})
三:回调函数
参考备注:
官方网站:(英文)
官方例子:(英文)
SWFUpload v2.2.0.1 手册: (英文)
SWFUpload下载地址
手册地址: