swfupload开发经验

swfupload是浏览器上传组件，可以利用flash插件实现文件多选、批量上传。源码下载地址http://code.google.com/p/swfupload/

作者使用的是2.5版的，查看demo文件夹，结构如图：

从服务器访问simpledemon文件夹，页面如下：

点击hello按钮弹出文件选择对话框，此时可以框选多个文件。选择文件上传，结果页面如下：

这个demo很简单，这个demo主要完成了flash前端设置，在index.php文件中，var settings = {}设置了flash属性。

注意的地方，flash可以控制文件的大小、文件的格式、一次文件的数量，后台不用进行判断控制。

flash_url : "../swfupload/swfupload.swf",//flash文件的位置
flash9_url : "../swfupload/swfupload_fp9.swf",// flash文件的位置
upload_url: "upload.php",//服务器端接受文件的php位置
post_params: {"PHPSESSID" : "<?php echo session_id(); ?>"},//如果接受上传的php文件要做session控制，保证上传session_id
file_size_limit : "800 KB",//限制文件大小 可以使KB,MB
file_types : "*.jpg;*.png;*.gif",//限制文件格式
file_types_description : "JPG Images; PNG Image",//格式说明
file_upload_limit : 100,//限制本次上传的数量
file_queue_limit : 0,//限制队列的数量



custom_settings : {
progressTarget : "fsUploadProgress",//设置显示进度栏在页面上的id
cancelButtonId : "btnCancel"
},

custom_settings设置上传按钮，id代表html页面上dom元素，加载页面时会根据配置替换该页面元素

button_image_url: "images/TestImageNoText_65x29.png",
button_ "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,

对照下面的代码截图，确定fsUploadProgress和spanButtonPlaceHolder的位置

下面的代码段，设置了flash上传的相应事件，这些事件的定义在当前目录js/handler.js文件中。

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,
upload_complete_handler : uploadComplete,
queue_complete_handler : queueComplete

例如：upload_success_handler : uploadSuccess,

代码在hander.js的113

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);
}
}

此时用浏览器跟踪，file是flash选中的上传文件对象，serverData是upload.php返回的信息。

二次开发可以在uploadSuccess之后做，添加js代码在页面中显示，给图片添加事件。