SWFUpload 使用总结
今天大概的对 SWFUpload 做了一些了解，发现该控件用起来很方便，功能也很强大 呵呵
SWFUpload 所用到的基本文件
<link href="./css/default.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/swfupload.js"></script>
<script type="text/javascript" src="js/swfupload.queue.js"></script>
<script type="text/javascript" src="js/fileprogress.js"></script>
<script type="text/javascript" src="js/handlers.js"></script>
swfupload.js 控件的核心对象
swfupload.queue.js 处理上传时队列的文件
fileprogress.js 进度条文件
handlers.js 上传事件文件 （该文件根据需要可以进行修改）
基本配置
大家可以只关心我注释的配置项
var swfu;
window.onload = function() {
var settings = {
flash_url : "./js/swfupload.swf", // flash路径 - flash8
flash9_url : "./js/swfupload_fp9.swf", // flash路径 - flash9
upload_url: "./upload.php", // 处理上传文件
use_query_string : false ,
file_size_limit : "100 MB", // 文件大小 - 但是没什么用，关键要看服务器设置的大小
file_types : "*.*", // 文件类型，如只支持 jpg 则 "*.jpg" 这样设置，此时你只能选择 .jpg 的文件
file_types_description : "All Files",
file_upload_limit : 1, // 文件上传个数限制，写多少即能上传多少
file_queue_limit : 0,
custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel"
},
file_post_name : 'Filedata' , // 他是 file 元素的 name 属性的值。在upload.php 用 $_FILES['Filedata'] 来处理
debug: true,
button_image_url: "images/TestImageNoText_65x29.png", // 按钮图片 可以修改自己喜欢的类型
button_width: "65", // 图片的宽度
button_height: "29", // 图片的高度
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '<span class="theFont">Hello</span>', // 在按钮中显示的信息 比如可以把他改成 上传
button_text_style: ".theFont { font-size: 16; }", // 按钮的字体大小
button_text_left_padding: 12,
button_text_top_padding: 3,
swfupload_preload_handler : preLoad,
swfupload_load_failed_handler : loadFailed,
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, // 这里比较重要，他是文件上传接受后激活的函数名 uploadSuccess 下面有说明
upload_complete_handler : uploadComplete,
queue_complete_handler : queueComplete // Queue plugin event
};
swfu = new SWFUpload(settings);
};
相对的html代码为
<div id="header">
<h1 id="logo"><a href="../">SWFUpload</a></h1>
<div id="version">v2.5.0</div>
</div>
<div id="content">
<h2>Simple Demo</h2>
<form id="form1" action="upload.php" method="post" enctype="multipart/form-data">
<p>This page demonstrates a simple usage of SWFUpload. It uses the Queue Plugin to simplify uploading or cancelling all queued files.</p>
<div class="fieldset flash" id="fsUploadProgress">
<span class="legend">Upload Queue</span>
</div>
<div id="divStatus">0 Files Uploaded</div>
<div>
<span id="spanButtonPlaceHolder"></span>
<input id="btnCancel" type="button" value="Cancel All Uploads" οnclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
</div>
</form>
</div>
html代码不用做说明，主要是 swfupload 上传之后我们需要做一些小小的修改。
当点击 默认的选择图片按钮 Hello 之后会弹出选择选件的选择框（flash弄出来的），swfupload 默认情况下 一旦选择了文件，他马上会将该附件提交到
upload.php （在上述 upload_url 中设置的）。而 upload.php 会将文件直接上传到我们的服务器。
问题是表单数据无法和附件同时上传给 upload.php 而upload.php 通常只对附近进行处理。
在这个时候我们可以对 uploadSuccess 方法做处理 打开该方法来看一眼 （他在 handlers.js内）
function uploadSuccess(file, serverData) {
try {
var progress = new FileProgress(file, this.customSettings.progressTarget);
progress.setComplete();
progress.setStatus("Complete.");
progress.toggleCancel(false);
} catch (ex) {
this.debug(ex);
}
}
这段代码只对异常做处理，而该方法是在 文件上传成功之后被激活的事件处理函数。其中有2个参数 我们只关心第一个参数 file
file 可以接受在 upload.php 中所输出的字符串（类似 ajax 异步请求之中的 xmlHttp.responseText）
也就是说 我们可以在 upload.php 中 当文件上传完毕之后 将所上传的文件名输出一下。
然后在 uploadSuccess 函数中 将 file 所得到的 文件名 赋值给 表单中的某个隐藏元素中，之后提交该表单的时候可以正确的将所上传的文件名保存到数据库！
但是还有一个问题，SWFUpload 一旦选择要上传的文件会立刻上传该文件，导致可能会残留垃圾文件，比如文件点错了。
采取的措施
设置 swfupload 上传的文件 存放在一个临时目录中，表单被提交的时候通过获取在临时目录中刚被上传的文件（因为之前我们将上传的文件名通过 uploadSuccess 函数赋值给表单元素的某个隐藏元素里） 然后将临时目录的文件 通过 rename 或者 copy 等方式 将他移动到真正的附件目录中。
那么 临时目录中的垃圾文件如何处理呢？ 第一个方案是在访问发布页面的时候第一个做的动作就是删除 保存 swfupload 所上传的临时目录内的所有文件
或者增加一个小功能，即清楚临时目录内残留的文件的模块 定期删除临时目录内的垃圾文件！