鼎鼎SWFUpload- Flash+JS 上传

什么是SWFUpload？ 　　SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。 [编辑本段]SWFUpload的主要特点 　　* 可以同时上传多个文件； 　　* 类似AJAX的无刷新上传； 　　* 可以显示上传进度； 　　* 良好的浏览器兼容性； 　　* 兼容其他JavaScript库 (例如：jQuery, Prototype等)； 　　* 支持Flash 8和Flash 9； 　　SWFUpload不同于其他基于Flash构建的上传工具，它有着优雅的代码设计，开发者可以利用XHTML、CSS和JavaScript来随心所欲的定制它在浏览器下的外观；它还提供了一组简明的JavaScript事件，借助它们开发者可以方便的在文件上传过程中更新页面内容来营造各种动态效果。 　　在使用SWFUpload之前，请确认你具备一定的JavaScript和DOM知识。在实际开发中，大部分的错误都是由于错误的设置和低劣的Event Handlers处理程序所造成的。 [编辑本段]文档中文翻译 　　http://www.v-sky.com/doc/swfupload/v2.1.0/Documentation.html [编辑本段]效果演示 　　* Classic Form Demo http://demo.swfupload.org/formsdemo ; 　　* Features Demo http://demo.swfupload.org/featuresdemo ; 　　* Application Demo http://demo.swfupload.org/applicationdemo ; 　　* v1.0.2 Plugin Demo http://demo.swfupload.org/v102demo ; [编辑本段]选择合适的Flash控件 　　在发行包（SWFUpload v2）中含有2个版本的Flash控件（swfupload_f8.swf 与wfupload_f9.swf），其中第一个版本拥有最佳的兼容性，但是为此损失了部分功能；而第二个版本提供了一些附加的功能但是损失了兼容性。 [编辑本段]SWFUpload的初始化与配置 　　首先，在页面中引用SWFUpload.js ，如 　　[removed][removed] 　　然后，初始化SWFUpload ，如 　　var swfu; 　　window.onload = function () { 　　swfu = new SWFUpload({ 　　upload_url : "http://www.swfupload.org/upload.php", 　　flash_url : "http://www.swfupload.org/swfupload_f9.swf", file_size_limit : "20480" 　　}); 　　}; 　　以下是一个标准的SWFUpload初始化设置所需的参数，你可以根据需要自己进行删减： 　　{ 　　upload_url : "http://www.swfupload.org/upload.php", 处理上传请求的服务器端脚本URL 　　file_post_name : "Filedata", 是POST过去的$_FILES的数组名 　　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" 　　}, 　　file_types : "*.jpg;*.gif", 允许上传的文件类型 　　file_types_description: "Web Image Files", 文件类型描述 　　file_size_limit : "1024", 上传文件体积上限，单位MB 　　file_upload_limit : 10, 限定用户一次性最多上传多少个文件，在上传过程中，该数字会累加，如果设置为“0”，则表示没有限制 　　file_queue_limit : 2, 上传队列数量限制，该项通常不需设置，会根据file_upload_limit自动赋值 　　flash_url : "http://www.swfupload.org/swfupload_f9.swf", Flash控件的URL 　　flash_width : "1px", 　　flash_height : "1px", 　　flash_color : "#FFFFFF", 　　debug : false, 是否显示调试信息 　　swfupload_loaded_handler : swfupload_loaded_function, 当Flash控件成功加载后触发的事件处理函数 　　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, 　　custom_settings : { 自定义设置 　　custom_setting_1 : "custom_setting_value_1", 　　custom_setting_2 : "custom_setting_value_2", 　　custom_setting_n : "custom_setting_value_n", 　　} 　　} [编辑本段]SWFUpload中的File Object 　　在SWFUpload的使用过程中，无论在客户端还是服务器端都要和File Object打交道，在一个File Object中包含了以下内容： 　　{ 　　id : string, // SWFUpload file id, used for starting or cancelling and upload 　　index : number, // The index of this file for use in getFile(i) 　　name : string, // The file name. The path is not included. 　　size : number, // The file size in bytes 　　type : string, // The file type as reported by the client operating system 　　creationdate : Date, // The date the file was created 　　modificationdate : Date, // The date the file was last modified 　　filestatus : number, // The file's current status. Use SWFUpload.FILE_STATUS to interpret the value. 　　} [编辑本段]SWFUpload中的方法 　　+ setPostParams (param_object) 　　- 描述 　　动态修改SWFUpload初始化设置中的post_params属性，其中所有的值都将被覆盖。 　　- 参数 　　param_object:一个simple JavaScript object，所有的name/value都必须是字符串，例如（this.setPostParams({ "Mari": name });）。 　　- 返回 　　void [编辑本段]SWFUpload中的事件 　　SWFUpload在运行过程中提供了多种事件，这些事件可以让开发者借助句柄来改变页面UI、改变行为，或者报告错误。所有这些事件都可以在一个SWFUpload实体中被调用，这意味着在这些事件对应的函数中，你可以用 this 关键字来代替引用SWFUpload实体。 　　+ fileDialogComplete (number of files selected) 　　- 触发条件 　　1. 用户选择好了要上传文件，并关闭对话框； 　　2. 用户什么也没选，并取消对话框； 　　如果你希望在用户选择完文件后自动开始上传操作，那么可以将 this.startUpload() 操作放在这里。 　　- 传入参数 　　number of files selected：将返回用户所选取的文件个数。 　　+ uploadStart (file object) 　　- 触发条件 　　该事件在文件上传之前触发，它用于完成一些准备工作，比如传递参数；负责响应该事件的句柄函数可以有2个返回值（true 或 false）当返回值为false时，整个上传将被取消；当返回值为true时上传过程继续进行。而如果返回值为false，则通常是由一个uploadError事件所导致的。 　　注：官方帮助文档的原文中对该事件的描述中有这样一句：“If you return 'true' or do not return any value then the upload proceeds.”，从中可以看到既定的设计是当不返回任何值的时候应该等同于返回true，但是笔者在开发中发现必须明确返回值，否则上传进程将停止响应，不知是否是一个bug呢？ 　　- 传入参数 　　file object：文件对象 　　+ uploadComplete (file object) 　　- 触发条件 　　在完成一个上传周期后（在uploadError 或 uploadSuccess之后），此时一个上传操作已经结束，另一个上传操作可以开始了。