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代码在页面中显示,给图片添加事件。