SWF upload

http://hi.baidu.com/kitty1180927/blog/item/cb86951740410a074b90a721.html
http://www.cnblogs.com/wd1984215/archive/2009/03/22/1418839.html

关于SWFUpload突然失效及SWFUpload v2的使用方法（原创）
最近发现SWFUpload突然不能正常使用了。查看了官方文档http://www.swfupload.org/，发现原来是FLash 10的原因。Adobe在2008年的10月发布Flash 10，幸好SWFUpload在12月推出了SWFUpload v2，解决了这个问题。

SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。
SWFUpload的主要特点
　　* 可以同时上传多个文件；
　　* 类似AJAX的无刷新上传；
　　* 可以显示上传进度；
　　* 良好的浏览器兼容性；
　　* 兼容其他JavaScript库 (例如：jQuery, Prototype等)；
　　* 对FLASH 9和FLASH 10播放器的支持(V2.2.0版本放弃了对Flash 8的支持)

而SWFUpload v2最主要的就是兼容了Flash Player 10的安全限制问题，但它也造成了和原来版本非常大的改动，注意哦，是非常大的，基本上，你就是要推翻原来的书写代码了，呵呵。

首先我们要下载新的SWFUpload
下载最新版本：http://swfupload.googlecode.com
我选择下载的是SWFUpload v2.2.0 Beta 4.1 Samples.zip，里面包含下面在线示范的例子的源代码，应该足够参考使用了，呵呵。

示范：
提供在线示范的例子： http://demo.swfupload.org/.

好，说重点的，怎么使用SWFUpload v2
在原来的SWFUpload版本中，我们会使用下列的句子来调用SWFUpload，主要是selectFiles();这个方法。
document.getElementById("BrowseButton").onclick = function () { swfu.selectFiles(); };
但在SWFUpload v2中，没有了这个方法，原因在下面会有详细解释，在这只说代替的代码。
在SWFUpload v2中，不能再使用html的button来触发SWFUpload，必须使用定制的Button，这其中比较要注意的是，button不能再用css控制，需要用图片来显示，共要做四张图，下面有详细说明。
用 <span id="spanButtonPlaceHolder"></span>来代替<input type="button" value="选择文件" onClick="swfu.selectFiles();"/>
然后在原来设定的地方加上button settings
// Button settings
button_image_url: "swfupload/BUTTON.gif", // Relative to the Flash file
button_width: "89",
button_height: "21",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '<span class="theFont">选择文件</span>',
button_text_style: ".theFont { font-size: 12; color: #FFFFFF;}",
button_text_left_padding: 12,
button_text_top_padding: 3,
大致大家能明白这事设置的意思，具体在下面有解释

完整的代码（功能是用来上传图片）
var settings = {
flash_url : "swfupload/swfupload.swf",
upload_url: "Upload.php", // Relative to the SWF file
post_params: {"PHPSESSID" : "<?php echo session_id(); ?>"},
file_size_limit : "2MB",
file_types : "*.jpg;*.gif;*.png",
file_types_description : "",
file_upload_limit : 10,
file_queue_limit : 0,
custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel"
},
debug: false,
// Button settings
button_image_url: "swfupload/BUTTON.gif", // Relative to the Flash file
button_width: "89",
button_height: "21",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '<span class="theFont">选择文件</span>',
button_text_style: ".theFont { font-size: 12; color: #FFFFFF;}",
button_text_left_padding: 12,
button_text_top_padding: 3,

// The event handler functions are defined in handlers.js
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete, //如果使用swfu.startUpload();来控制几时上传照片的，这行就不要写。
queue_complete_handler : queueComplete // Queue plugin event

};
如果希望上传和选择文件的功能分开，可以再使用上传的功能，呵呵，upload_complete_handler : uploadComplete, 这行就不能写了，不然就是一键上传功能了。
<input type="button" value=" 上 传 " onClick="swfu.startUpload();"/>
还有停止和取消上传的，这个我就不一一写了，
好，大家应该基本上可以使用新的SWFUpload了。

SWFUpload V2的新增功能
Flash Player 10的安全机制更严格，类似打开文件上传的对话框的操作，一定需要用户交互才触发，如果用脚本触发，会报#2176的运行时错误。

void selectFile()
不赞成使用，不兼容Flash Player 10
弹出flash的文件选择对话框，只能选择单个文件。

void selectFiles()
不赞成使用，不兼容Flash Player 10
弹出flash的文件选择对话框，可一次性选择多个文件。

flash_width
固定值：1px
(v2.1.0已删除) 设置插入flash影片的HTML元素容器的宽度。如果此设置小于1像素，一些浏览器会出现功能异常。 因此该值在v2.1.0中删除了自定义设置，默认设置为1像素了。

flash_height
固定值：1px
(v2.1.0已删除) 设置插入flash影片的HTML元素容器的高度。如果此设置小于1像素，一些浏览器会出现功能异常。 因此该值在v2.1.0中删除了自定义设置，默认设置为1像素了。

flash_color
默认值：#FFFFFF
(v2.2.0已删除) 设置HTML页面中的flash背景色，默认为#FFFFFF

prevent_swf_caching
默认值：true
(v2.2.0新增)该布尔值设置是否在Flash URL后添加一个随机值，用来防止浏览器缓存了该SWF影片。这是为了解决一些基于IE-engine的浏览器上的出现一个BUG。

提醒：SWFUpload是直接在flash_url后添加了一个swfuploadrnd的随机参数。如果你给定的flash_url中已经存在了GET类型的参数，那么就会出现两个问号连接符导致错误。

button_placeholder_id
默认值：null
(v2.2.0新增) 该必要参数指定了swfupload.swf将要替换的页面内的DOM元素的ID值。当对应的DOM元素被替换为SWF元素时，SWF的容器会被添加一个名称为"swfupload"的样式选择器供CSS自定义使用。

button_image_url
默认值：空字符串
(v2.2.0新增) V2.2.0版最大的改变就是引入了一个按钮到SWF中，利用该参数可以设置一个相对于该swf文件或者是绝对地址的图片（或者是SWF），作为按钮的UI展现。所有FLASH支持的图片类型都可以使用（gif,jpg,png,或者是一个SWF）。
该按钮图片需要经过一定规则（CSS Sprite）的处理。按钮图片中需要包括按钮的4个状态，从上到下依次是normal, hover, down/click, disabled.(可以参照官方demo中的图片)

button_width
默认值：1
(v2.2.0新增) 设置该SWF的宽度属性。

button_height
默认值：1
(v2.2.0新增)设置该SWF的高度属性（按钮图片高度的1/4）

button_text
默认值：空字符串
(v2.2.0新增) 该属性设置Flash Button中显示的文字，支持HTML。HTML文本的样式可以通过CSS选择器并配合button_text_style参数来设置。关于Flash文本对HTML的支持详细可见 Adobe's Flash documentation。

button_text_style
默认值："color: #000000; font-size: 16pt;"
(v2.2.0新增)此参数配合button_text参数，可以通过CSS样式来设置Flash Button中的文字样式。关于Flash文本对CSS的支持详细可见Adobe's Flash documentation

button_text_top_padding
默认值：0
(v2.2.0新增) 设置Flash Button上文字距离顶部的距离，可以使用负值。

button_text_left_padding
默认值：0
(v2.2.0新增) 设置Flash Button上文字距离左侧的距离，可以使用负值。

button_action
默认值：SWFUpload.BUTTON_ACTION.SELECT_FILES(多文件上传)
(v2.2.0新增) 设置Flash Button点击以后的动作。默认为SWFUpload.BUTTON_ACTION.SELECT_FILES，点击按钮将会打开多文件上传的对话框。如果设置为SWFUpload.BUTTON_ACTION.SELECT_FILE，则为单文件上传。如果设置为SWFUpload.BUTTON_ACTION.START_UPLOAD，则启动文件上传。

button_disabled
默认值：false
(v2.2.0新增) 该布尔值设置Flash Button是否是禁用状态。当它处于禁用状态的时候，点击不会执行任何操作。

button_cursor
默认值：SWFUpload.CURSOR.ARROW(箭头光标)

(v2.2.0新增) 此参数可以设置鼠标划过Flash Button时的光标状态。默认为SWFUpload.CURSOR.ARROW，如果设置为SWFUpload.CURSOR.HAND，则为手形

button_window_mode
默认值：SWFUpload.WINDOW_MODE.WINDOW
(v2.2.0新增) 此参数可以设置浏览器具体以哪种模式显示该SWF影片。

最后，SWFUpload v2在the Mac Flash Player上不能正常功能。

相关文档：
官方网站
http://www.swfupload.org/
官方文档
http://demo.swfupload.org/Documentation/
中文翻译
http://www.v-sky.com/doc/swfupload/Documentation.html


*****************************************


什么是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处理程序所造成的。
效果演示
* Classic Form Demo http://demo.swfupload.org/formsdemo;
* Multi-Instance Demo http://demo.swfupload.org/multiuploaddemo;
* 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 ，如
<script type=”text/javascript” src=”http://www.swfupload.org/swfupload.js“></script>
然后，初始化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”, 相当于<input type=”file” name=”" />中的name
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之后），此时一个上传操作已经结束，另一个上传操作可以开始了。

– 传入参数
file object：文件对象
+ uploadProgress (file object, bytes complete, total bytes)
– 触发条件
该事件在整个文件的上传过程中定期性的被Flash控件自动触发，用以帮助开发者实时更新页面UI来制作上传进度条。
注意：该事件在Linux版本的Flash Player中存在问题，目前还无法解决。

– 传入参数
file object：文件对象
bytes complete：已经上传完毕的文件字节数
total bytes：文件总体积的字节数
常见错误
■ 所上传的文件体积并未超出SWFUpload所设置的数值，但为何无法成功上传？
□ 通常这是由于服务器端的限制所造成的，以Apache+PHP为例，请修改php.ini中的post_max_size与upload_max_filesize两项设置。
■ 在带有Session验证的网站后台中SWFUpload无法正常工作？
□ 这是因为SWFUpload在上传时相当于重新开辟了一个新的Session进程，因此无法与原有程序的Session保持一致，这就需要在上传时传递原有程序的SessionID，根据它来“找回”其应有的Session。