SWFUpload技术文档

SWFUploadSWF多文件无刷新上传，利用flash完成多文件上传操作。服务器端可以用Struts、Servlet、JSP完成，这里用Struts1.x完成上传1、首先看下目录结构SWFUpload这个文件夹是核心文件，里面的文件一个都不能少。css文件夹是样式文件，所有的样式可以在此文件中修改完成images是图片jslib是js库文件，需要的上传的js文件和flash文件其中handlers.js是上传中一系列的事件，可以在此文件中修改自己的上传所需要的事件。如开始上传、取消、停止上传等swfupload.queue.js这个文件主要是完成将客户端选择的多一个文件一个个的排成一个队列，然后依次向服务器上传。swfupload.swf是flash文件，就那个添加或上传的按钮sample.html是完成后的上传实例2、首先看看客户端的sample.html中的js和html内容!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01//ENhtmlheadtitleSWFUpload多文件上传示例/titlemetahttp-equiv=content-typecontent=text/html;charset=gbklinkrel=stylesheettype=text/csshref=css/default.cssscripttype=text/javascriptsrc=jslib/swfupload.js/scriptscripttype=text/javascriptsrc=jslib/swfupload.queue.js/scriptscripttype=text/javascriptsrc=jslib/fileprogress.js/scriptscripttype=text/javascriptsrc=jslib/handlers.jscharset=utf-8/scriptscripttype=text/javascriptvarswfUpload;window.onload=function(){varsettings={flash_url:jslib/swfupload.swf,upload_url:../upload.do,post_params:{param:uploadParams},file_size_limit:200MB,file_types:*.*,file_post_name:uploadFile,file_types_description:AllFiles,file_upload_limit:50,file_queue_limit:0,custom_settings:{progressTarget:fsUploadProgress,cancelButtonId:btnCancel},debug:true,//是否显示调试的textarea//Buttonsettingsbutton_image_url:images/TestImageNoText_65x29.png,button_width:65,button_height:29,button_placeholder_id:spanButtonPlaceHolder,button_text:'spanclass=theFont浏览/span',button_text_style:.theFont{font-size:12;},button_text_left_padding:12,button_text_top_padding:3,//Theeventhandlerfunctionsaredefinedinhandlers.jsfile_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};//自定义属性，是否停止上传swfUpload=newSWFUpload(settings);swfUpload.stopped=false;};functionfileDialogComplete(numberselected,numberqueued){if(swfUpload.getStats().files_queued0){document.getElementById(btnCancel).disabled=false;}}functionqueueComplete(numberselected,numberqueued){//alert(numberselected+-+numberqueued);}functionupload(){if(swfUpload.getStats().files_queued0){//document.getElementById(btnCancel).disabled=true;swfUpload.startUpload();}else{alert(请选择要上传的文件!);}}functionstop(){if(swfUpload){swfUpload.stopUpload();}}/script/headbodydivid=contenth2/h2formid=form1action=method=postenctype=multipart/form-datap/pdivclass=fieldsetflashid=fsUploadProgressspanclass=legend上传文件列表/span/divdivid=divMovieContainerinputid=filenamelisttype=hiddenname=filenamelist/spanid=spanButtonPlaceHolder/spaninputtype=buttonvalue=上传onclick=upload();style=margin-left:2px;font-size:8pt;height:29px;/inputtype=buttonvalue=停止onclick=stop();style=display:none;margin-left:2px;font-size:8pt;height:29px;/inputid=btnCanceltype=buttonvalue=取消所有onclick=swfUpload.cancelQueue();disabled=disabledstyle=margin-left:2px;font-size:8pt;height:29px;/inputtype=buttononclick=javaScript:window.close();name=btstyle=margin-left:2px;font-size:8pt;height:29px;value=关闭//div/form/div/body/htmlA．先介绍导入的js文件linkrel=stylesheettype=text/csshref=css/default.cssscripttype=text/javascriptsrc=jslib/swfupload.js/scriptscripttype=text/javascriptsrc=jslib/swfupload.queue.js/scriptscripttype=text/javascriptsrc=jslib/fileprogress.js/scriptscripttype=text/javascriptsrc=jslib/handlers.jscharset=utf-8/script这些文件是必须的，且在导入的时候注意你的路径和顺序。还有就文件编码，文件保存的不同编码可以会影响文件显示的乱码问题，charset就是文件保存的编码。B．然后在其中是script脚本的参数详细讲解设置flash文件flash_url:jslib/swfupload.swf,设置服务器的上传地址upload_url:../upload.do,提交到服务器的参数信息，这样就添加了一个param参数，值是uploadParams在服务器端用request.getParameter(“param”)就可以拿到值post_params:{param:uploadParams},上传文件的最大空间file_size_limit:200MB,允许上传文件的类型，*.*是所有，*.txt只能上传文本file_types:*.*,这个就服务器端要获得的文件的属性，相当于file的namefile_post_name:uploadFile,所有文件夹file_types_description:AllFiles,上传文件选取的最大队列数file_upload_limit:50,file_queue_limit:0,下面是上传按钮的设置button_image_url:images/TestImageNoText_65x29.png,button_width:65,button_height:29,button_placeholder_id:spanButtonPlaceHolder,button_text:'spanclass=theFont浏览/span',button_text_style:.theFont{font-size:12;},button_text_left_padding:12,button_text_top_padding:3,下面是上传事件和函数：选择完文件后就触发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下面看看html代码：formid=form1action=method=postenctype=multipart/form-datap/pdivclass=fieldsetflashid=fsUploadProgressspanclass=legend上传文件列表/span/divdivid=divMovieContainerinputid=filenamelisttype=hiddenname=filenamelist/spanid=spanButtonPlaceHo