SWFUpload 多文件上传手册

合集下载

jquery+SWFUpload+COS上传组件的使用

jquery+SWFUpload+COS上传组件的使用
/*自定义jquery插件vinSwfUpload的皮肤css样式*/
<linkhref="css/vinSwfUpload-1.2-skin.css"rel="stylesheet"type="text/css"/>
/*自定义jquery插件vinSwfUpload的主要css样式*/
<linkhref="css/vinSwfUpload-1.2.css"rel="stylesheet"type="text/css"/>
sizeUnit:"Byte",
选择的文件最终显示的计量结果单位
sizeFixed:2,
在计算结果后保留的小数位数
fileType:"*.*",
允许上传的文件类型பைடு நூலகம்
autoRemove:false,
是否自动移除完成上传的记录
autoRemoveStoped:false,
是否在停止的时候移除上传中的文件记录
<param-value>10</param-value>
</init-param>
<!--请求响应编码格式-->
<init-param>
<param-name>ENCODING</param-name>
<param-value>utf-8</param-value>
</init-param>
<!--是否使用自定义目录-->
<!--上传的文件大小上限单位M-->

文件上传利器SWFUpload使用指南

文件上传利器SWFUpload使用指南
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"
},
use_query_string:false,
一、配置参数对象中的常用属性及说明
属性
类型
默认值
描述
upload_url
String
处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当前代码所在的文档地址
preserve_relative_urls
Boolean
false
如果为false则SWFUpload会把swfupload.swf用到的相对地址转换为绝对地址,以达到更好的兼容性
file_upload_limit
Number
指定最多能上传多少个文件,当上传成功的文件数量达到了这个最大值后,就不能再上传文件了,也不能往上传队列里添加文件了。把该属性设为0时表示不限制文件的上传数量。
file_queue_limit
Number
指定文件上传队列里最多能同时存放多少个文件。当超过了这个数目后只有当队列里有文件上传成功、上传出错或被取消上传后,等同数量的其他文件才可以被添加进来。当file_upload_limit的数值或者剩余的能上传的文件数量小于file_queue_limit时,则取那个更小的值
...等等
我们看到要实现一个swfupload上传功能很简单,就是实例化一个swfupload对象。但繁琐的地方就在于实例化实要用到的参数配置对象,以及各种事件的发生时机以和提供的参数。所以重点来了。下面几个表格对开发中要用到的东西列举了出来,虽然已经蛮多了,但并不是swfupload的全部,我列出来的只是常用的。要查看完整的文档,请到swfupload官网上查询。

SWFUpload中文教本新

SWFUpload中文教本新

个 个 upload_start_handler : upload_start_function,
个 个 upload_progress_handler : upload_progress_function,
个 个 upload_error_handler : upload_error_function,
个 个 modificationdate : Date, // The date the file was last modified
个 个 filestatus : number, // The file's current status. Use SWFUpload.FILE_STATUS to in
个个-
个 个 void
[
]SWFUpload
个 个 SWFUpload
UI
SWFUpload
this
SWFUpload
个 个 + fileDialogComplete (number of files selected) 个个个 个 1.
个 个 2. 个个 个个个 个 number of files selected 个 个 + uploadStart (file object) 个个-
个 个 file_size_limit : "1024",
MB
个 个 file_upload_limit : 10,
“0”
个 个 file_queue_limit : 2,
file_upload_limit
个 个 flash_url : "/swfupload_f9.swf", Flash 个 个 flash_width : "1px", 个 个 flash_height : "1px", 个 个 flash_color : "#FFFFFF", 个 个 debug : false, 个 个 swfupload_loaded_handler : swfupload_loaded_function, Flash

EXT+SWFUpload文件上传

EXT+SWFUpload文件上传

服务器返回(PHP),其他的语言只要返回值为JSON就行成功:json_encode(array('state'=>true,'info'=>'上传成功','servername'=>服务器保存的文件名(不带扩展名),'linkurl'=>保存路径,'filemaxid'=>公告记录ID(可以根据需要不用),'fileext'=>文件扩展名));失败:json_encode(array('state'=>false,'info'=>错误信息));如果要做为HTMLEDITOR的一个图标使用,加以下代码,在EXT-all-debug.js文件HTMLEDITOR 控件内容中,具体位置找一下啰注意要给HTMLEDITOR加个参数:uploadfileConfig:{}tb.add('-',{itemId:'uploadfile',iconCls: 'uploadfile',scope: editor,handler: function(){var tmpuploadwin = Ext.getCmp(this.id+'_uploadwin');if(!tmpuploadwin){this.uploadfileConfig.upload_win_id = this.id+'_uploadwin';this.uploadfileConfig.upload_type = 1; //我用这个代表传文件,0-代表传图片new Ext.SWFUpload(this.uploadfileConfig);}else{tmpuploadwin.show();}},tooltip: {title: '插入附件',text: '在光标所在位置插入附件引用.',cls: 'x-html-editor-tip'}})在需要的地方引用:xtype:'htmleditor',uploadfileConfig:{upload_url:处理文件上传后台保存的URL,file_size_limit:文件大小限制,file_upload_limit:上传文件数限制,del_datafile_url:删除已上传文件的URL,del_datafile_params:前面URL参数如'task=bulletin_delfile',post_params:{传文件时需要传的参数,关键字和值都用引号引起来}},代码(放EXT-all-debug.js最后):Ext.SWFUpload = function(config){Ext.apply(this, config);var Application={};Application.uploadDialog = {upload_win_id:this.upload_win_id,upload_type:this.upload_type,del_datafile_url:this.del_datafile_url,del_datafile_params:this.del_datafile_params,SingleUpload:false, //单个/多个文件上传模式DeleteFileCount:0, //删除已上传文件次数,限制小于或等于允许上传的文件数file_upload_limit,防止反复删除上传UploadSuccessCount:0, //真正上传到服务器上的文件数FileMaxId:'', //处理业务表的最大记录数StopUpload:false, //停止上传标志progressBarText:this.progressBarText,statuBarText:this.statuBarText,upload_url:this.upload_url,file_size_limit :this.file_size_limit,file_types :this.file_types,file_types_description :this.file_types_description,file_upload_limit :this.file_upload_limit,file_queue_limit :this.file_queue_limit,button_image_url : this.button_image_url,button_placeholder_id : this.button_placeholder_id,button_width: this.button_width,button_height: this.button_height,button_cursor: this.button_cursor,button_window_mode: this.button_window_mode,flash_url:this.flash_url,post_params : this.post_params,custom_settings : this.custom_settings,debug: this.debug,show:function(){if(!this.dialog) this.initDialog();this.uploadAction[1].disable();this.uploadAction[2].disable();this.uploadAction[3].disable();this.uploadAction[4].disable();this.uploadAction[5].disable();this.uploadAction[6].disable();this.uploadAction[7].enable();},ok:function(){var rtnurl = '';var obj=Application.uploadDialog;var store=obj.uploadGrid.store;var rowcount=store.getCount();var fileexticon = {'doc':'word','dot':'word','rtf':'word','xls':'excel','xlt':'excel','xla':'excel','xlw':'excel','pdf':'pdf','dll':'d ll','ppt':'ppt','pot':'ppt','pps':'ppt','ppa':'ppt','vsd':'visio','vss':'visio','vst':'visio','rar':'rar','zip':'rar' ,'swf':'flash','htm':'html','html':'html','mht':'html','mhtml':'html','txt':'text','log':'text','sql':'text','exe':'exe' ,'com':'exe','bat':'exe','bmp':'picture','jpg':'picture','jif':'picture','jfif':'picture','jpeg':'picture','gif':'picture','png':'pict ure','emf':'picture','ini':'ini','cfg':'ini','rle':'picture','wmf':'picture','dib':'picture','mid':'sound','midi':'sound','mp3':'sound','asf':'sou nd','rm':'sound'};for(var i = 0;i<rowcount;i++){var rec = store.getAt(i);if(rec.data['uploaded']==1){var filetype = rec.data['filetype'].toLowerCase();filetype = (fileexticon[filetype]) ? fileexticon[filetype] : 'unknow';//rtnurl = rtnurl + '<p style="height:24px; font-size: 14px; line-height: 23px;"><img src="/resources/00/image/'+filetype+'.gif" border="0"><a class="bulletin" href="/bulletin/bulletin_readfile.html?file='+rec.data['linkurl']+rec.data['servername']+'.'+rec.dat a['filetype']+'">'+rec.data['linkname']+'&#160;&#160;<spanstyle="font-size:12px">['+Ext.util.Format.fileSize(rec.data['size'])+']</span></a></p>';rtnurl = rtnurl + '<p style="height:24px; font-size: 14px; line-height: 23px;"><img src="/resources/00/image/'+filetype+'.gif" border="0"><a class="bulletin" href="javascript:void(0);"onclick="fun_filedown(\'/bulletin/bulletin_readfile.html?name='+encodeURIComponent(rec.data ['linkname']+'.'+rec.data['filetype'])+'&path='+encodeURIComponent(rec.data['linkurl'])+'&file='+ rec.data['servername']+'.'+rec.data['filetype']+'\')">'+rec.data['linkname']+'.'+rec.data['filetype']+' &#160;&#160;<spanstyle="font-size:12px">['+Ext.util.Format.fileSize(rec.data['size'])+']</span></a></p>';}}this.dialog.hide();Ext.getCmp(this.dialog.id.substr(0,this.dialog.id.length -10)).insertAtCursor(rtnurl);},hide:function(){this.dialog.hide();},deletefile:function(rec,store,obj){if(rec.data.uploaded=='1'){ //删除上传成功的文件,需要删除数据库信息和服务器文件if(obj.DeleteFileCount>=obj.file_upload_limit){msgbox('E','已达到上传文件删除次数限制!');return false;}var deltmpparams = obj.del_datafile_params+'&filepath='+rec.data.linkurl+'&filename='+rec.data.servername+'&filee xt='+rec.data.filetype;var delinfo = fun_sync_exec(obj.del_datafile_url,deltmpparams);delinfo = Ext.decode(delinfo);if(delinfo.state==false){ //后台删除失败rec.set('state','4');rec.set('errinfo',);mitChanges();return false;}else{ //后台删除成功obj.DeleteFileCount++; //增加删除次数obj.UploadSuccessCount--; //减少真正上传数obj.swfu.setStats({successful_uploads:obj.UploadSuccessCount}); //减少SWF真正上传数obj.swfu.cancelUpload(rec.data.id,false);store.remove(rec);}}else{ //删除未上传或未成功的文件obj.swfu.cancelUpload(rec.data.id,false);store.remove(rec);}obj.stateInfo.getEl().innerHTML=String.format(obj.statuBarText,store.getCount(),Ext.util.For mat.fileSize(store.sum('size')));if(store.getCount()==0){store.removeAll();obj.uploadProgressBar.updateProgress(0,'');obj.uploadProgressBar.updateT ext('');obj.swfu.setButtonDisabled(false);obj.uploadAction[1].disable();obj.uploadAction[2].disable();obj.uploadAction[3].disable();obj.uploadAction[4].disable();obj.uploadAction[5].disable();obj.uploadAction[6].disable();}return true;},uploadAction:[new Ext.Action({id:'fileupload_selectfile_id'}),new Ext.Action({text:'删除选择',iconCls:'filedel',disabled:true,handler:function(){ var obj=Application.uploadDialog;var grid=obj.uploadGrid;if(!grid.selModel.hasSelection()){msgbox('W','请先选择要删除的记录!');return;}var store=grid.store;var selection=grid.getSelectionModel().getSelections();for(var i=0;i<selection.length;i++){var rec=store.getAt(store.indexOfId(selection[i].id));if(!obj.deletefile(rec,store,obj)) return false; //删除}}}),new Ext.Action({text:'清空全部',iconCls:'filecancel',disabled:true,handler:function(){var obj=Application.uploadDialog;var store=obj.uploadGrid.store;var len=store.getCount();for(var i=0;i<len;i++){var rec=store.getAt(0);if(!obj.deletefile(rec,store,obj)) return false; //删除}}}),new Ext.Action({text:'上传选择',iconCls:'fileupselect',disabled:true,handler:function(){var obj=Application.uploadDialog;obj.SingleUpload = true; //单个上传模式var grid=obj.uploadGrid;if(!grid.selModel.hasSelection()){msgbox('W','请先选择要上传的记录!');return;}var selection=grid.getSelectionModel().getSelections();var rec=selection[0];obj.swfu.startUpload(rec.data.id);}}),new Ext.Action({text:'上传全部',iconCls:'fileupall',disabled:true,handler:function(){var obj=Application.uploadDialog;obj.SingleUpload = false; //多个上传模式obj.StopUpload = false; //取消停止标志obj.swfu.startUpload();}}),new Ext.Action({text:'停止进程',iconCls:'fileupstop',disabled:true,handler:function(){var obj=Application.uploadDialog;obj.StopUpload = true; //设置停止标志obj.swfu.stopUpload();}}),new Ext.Action({text:'确定',iconCls:'ok',handler:function(){Application.uploadDialog.ok();}}),new Ext.Action({text:'退出',iconCls:'exit',handler:function(){Application.uploadDialog.hide();}})],initDialog:function(){this.dialog=newExt.Window({id:this.upload_win_id,iconCls:'uploadfile',animCollapse:false,layout:'fit',width:640,height:370,title:'附件上传...',closeAction:'hide',border:false,modal:true,plain:true,closable:false,resizable:true,collapsible:true,maximizable:true,bbar:[this.uploadProgressBar=new Ext.ProgressBar({width:624})],items:[this.uploadGrid=new Ext.grid.EditorGridPanel({autoExpandColumn0:1,enableHdMenu:false,clicksToEdit:1,autoEncode:true,selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),tbar:[this.uploadAction[0],'-',this.uploadAction[1],this.uploadAction[2],'-',this.uploadAction[3],this.uploadAction[4],'-',this.uploadAction[5],'->','-',this.uploadAction[ 6],'-',this.uploadAction[7]],bbar:[this.stateInfo=newExt.Toolbar.TextItem(String.format(this.statuBarText,0,Ext.util.Format.fileSize(0)))],store: new Ext.data.SimpleStore({fields: ['autoid','id','state', 'file','size','filetype','errinfo','reuploadcount','linkname','linkurl','servername','uploaded'],data:[]}),columns:[new Ext.grid.RowNumberer1(),{header: '文件名称',width:200,dataIndex:'file',sortable:true},{header: '大小', width: 60,renderer:Ext.util.Format.fileSize,dataIndex:'size',sortable:true,align:'right'},{header: '状态', width: 70,dataIndex:'state',align:'center',sortable:true,renderer:function(_value){if(_value=='0'){return '等待上传';}else if(_value=='1'){return '<font color=orange>正在上传…</font>';}else if(_value=='2'){return '<font color=green>上传成功</font>'}else if(_value=='3'){return '<font color=red>上传失败</font>'}else if(_value=='4'){return '<font color=red>删除失败</font>'} }},{header: '错误信息', width: 105,dataIndex:'errinfo',sortable:true},{header: '链接文字', width: 138,dataIndex:'linkname',sortable:true,editor:newExt.form.TextField({allowBlank:false,minLength:1,maxLength:200,validationDelay:50})}//,{header: 'linkurl', width: 100,dataIndex:'linkurl',sortable:true},//{header: 'servername', width: 100,dataIndex:'servername',sortable:true},//{header: 'uploaded', width: 100,dataIndex:'uploaded',sortable:true}]})],listeners: {'resize':function(a,b,c){Application.uploadDialog.uploadProgressBar.setWidth(b - 16);}}})this.dialog.show();var tmpdomsapn = this.dialog.body.createChild({tag: 'span',id:'fileupload_selectfile_span'});Ext.get('fileupload_selectfile_id').replaceWith(tmpdomsapn);this.swfucfg = {upload_url:this.upload_url,file_size_limit :this.file_size_limit,file_types :this.file_types,file_types_description :this.file_types_description,file_upload_limit :this.file_upload_limit,file_queue_limit :this.file_queue_limit,file_dialog_start_handler : this.fileDialogStart,file_queued_handler : this.fileQueued,file_queue_error_handler : this.queueError,file_dialog_complete_handler : this.fileDialogComplete,upload_start_handler : this.uploadFileStar,upload_progress_handler : this.uploadProgress,upload_error_handler : this.uploadError,upload_success_handler : this.uploadSuccess,upload_complete_handler : this.uploadComplete,//选择文件按钮设置button_image_url : this.button_image_url,button_placeholder_id : this.button_placeholder_id,button_width: this.button_width,button_height: this.button_height,button_cursor: this.button_cursor,button_window_mode: this.button_window_mode,//FLAS插件URLflash_url:this.flash_url,post_params : this.post_params, //附加传递参数custom_settings : this.custom_settings,debug: this.debug}this.swfu=new SWFUpload(this.swfucfg);},fileQueued:function(file){ //选择文件后排队事件var obj=Application.uploadDialog;var data=[];var filetype=(file.type.substr(1)).toLowerCase(); //文件类型var showname = .substr(0,.length - file.type.length);//for(var prop in file){alert(prop+" : "+file[prop]);}var rowcount=obj.uploadGrid.store.getCount();if(rowcount>0){ //已经选取文件需要验证是否又选择了同名的文件if(obj.uploadGrid.store.find('file',,0,false)!= -1){obj.swfu.cancelUpload(file.id,false);msgbox('E',+' 已经被选取!');return;}}data.push([file.index+1,file.id,'0',,file.size,filetype,'',0,showname,'','','0']);obj.uploadGrid.store.loadData(data,true);obj.uploadAction[1].enable();obj.uploadAction[2].enable();obj.uploadAction[3].enable();obj.uploadAction[4].enable();obj.uploadAction[5].disable();obj.stateInfo.getEl().innerHTML=String.format(obj.statuBarText,obj.uploadGrid.store.getCou nt(),Ext.util.Format.fileSize(obj.uploadGrid.store.sum('size')));obj.uploadProgressBar.updateProgress(0,'上传就绪!');},queueError:function(file,errcode,message){switch (errcode) {case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:msgbox('E','单个文件大小不能超过'+Application.uploadDialog.swfucfg.file_size_limit+'!<br><br>出错文件:'+);break;case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:msgbox('E','不能上传0 字节文件!<br><br>出错文件:'+);break;case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:msgbox('E','无法识别的文件类型!<br><br>出错文件:'+);break;case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:msgbox('E','最多只能上传'+Application.uploadDialog.swfucfg.file_upload_limit+' 个文件!');break;default:msgbox('E','未知错误,无法选择文件!<br><br>出错文件:'+);break;}return;},uploadFileStar:function(file){var obj=Application.uploadDialog;var index=obj.findData(file.id);obj.swfu.setButtonDisabled(true);obj.uploadAction[1].disable();obj.uploadAction[2].disable();obj.uploadAction[3].disable();obj.uploadAction[4].disable();obj.uploadAction[5].enable();obj.uploadAction[7].disable();if(index>=0){if(obj.uploadGrid.store.getAt(index).data.reuploadcount>=3){msgbox('E','文件反复上传次数不能超过3 次!<br><br>出错文件:'+);obj.StopUpload = true; //设置停止标志return false;}obj.post_params['uploadtype'] = String(obj.upload_type); //上传类型(0-图片;1-文件)obj.post_params['fileoknum'] = String(obj.UploadSuccessCount); //真正已经上传的文件数obj.post_params['fileindex'] = String(Math.abs(file.index)); //为了保存文件名不重复,加入文件序号参数obj.post_params['filetype'] = obj.uploadGrid.store.getAt(index).data.filetype; //传入文件扩展名obj.post_params['filemaxid'] = obj.FileMaxId; //业务表中的最大记录号obj.swfu.setPostParams(obj.post_params);obj.uploadGrid.store.getAt(index).set('state','1');obj.uploadGrid.store.getAt(index).set('reuploadcount',obj.uploadGrid.store.getAt(index).dat a.reuploadcount+1);mitChanges();}obj.uploadProgressBar.updateProgress(0,String.format(obj.progressBarText,,0));return true;},uploadProgress:function(file,bytesloaded){var obj=Application.uploadDialog;var percent = Math.ceil((bytesloaded / file.size) * 100);obj.uploadProgressBar.updateProgress(percent/100,String.format(obj.progressBarText,file.n ame,percent));},uploadSuccess:function(file,server_data){ //用服务器返回的文件大小和当前的比较,一致表示成功server_data = Ext.decode(server_data);var obj=Application.uploadDialog;var index=obj.findData(file.id);if(index>=0){var rec = obj.uploadGrid.store.getAt(index);if(server_data.state==false){ //从服务器返回失败rec.set('state','3');rec.set('errinfo',server_);}else{obj.UploadSuccessCount ++;obj.FileMaxId = server_data.filemaxid; //得到业务系统最大记录数rec.set('state','2');rec.set('errinfo','');rec.set('linkurl',server_data.linkurl);rec.set('servername',server_data.servername);rec.set('filetype',server_data.fileext);rec.set('uploaded','1');obj.uploadAction[6].enable();}mitChanges();}obj.swfu.setStats({successful_uploads:obj.UploadSuccessCount}); //根据服务器返回成功数设置控件的真正成功数},uploadComplete:function(file){var obj=Application.uploadDialog;//多文件自动上传if(obj.swfu.getStats().files_queued>0 && obj.SingleUpload===false && obj.StopUpload==false){obj.swfu.startUpload();}else{obj.uploadProgressBar.updateProgress(1,'上传完毕!');obj.swfu.setButtonDisabled(false);obj.uploadAction[1].enable();obj.uploadAction[2].enable();obj.uploadAction[3].enable();obj.uploadAction[4].enable();obj.uploadAction[5].disable();obj.uploadAction[7].enable();}},uploadError:function(file,errcode,message){var errinfo = '';switch (errcode) {case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:errinfo = 'HTTP网络协议失败';break;case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL: errinfo = '未找到服务器地址';break;case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:errinfo = '上传过程失败';break;case SWFUpload.UPLOAD_ERROR.IO_ERROR:errinfo = '文件读取错误';break;case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:errinfo = '无文件操作权限';break;case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED: errinfo = '上传超时';break;case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND: errinfo = '未找到上传文件';break;case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED: errinfo = '文件检验失败';break;case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:errinfo = '上传过程被取消';break;case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:errinfo = '上传过程被停止';break;default:errinfo = '未知错误';break;}var obj=Application.uploadDialog;if(file){var index=obj.findData(file.id);if(index>=0){obj.uploadGrid.store.getAt(index).set('state','3');obj.uploadGrid.store.getAt(index).set('errinfo',errinfo);}mitChanges();}obj.swfu.setButtonDisabled(false);obj.uploadAction[1].enable();obj.uploadAction[2].enable();obj.uploadAction[3].enable();obj.uploadAction[4].enable();obj.uploadAction[5].disable();obj.uploadAction[7].enable();},fileDialogStart:function(){},fileDialogComplete:function (num_files_queued){},findData:function(id){var rowindex=Application.uploadDialog.uploadGrid.store.find('id',id);return rowindex;}}Application.uploadDialog.show();};Ext.SWFUpload.prototype = {upload_win_id:'',upload_type:0, //上传类型(0-图片;1-文件)del_datafile_url:'', //删除上传文件及数据库信息的URLdel_datafile_params:'', //删除上传文件及数据库信息附加条件progressBarText:'正在上传:{0},{1}%完成',statuBarText:'文件总数:{0}个;总计大小:{1}',upload_url:'',file_size_limit : '8 MB',file_types : '*.*',file_types_description : '文件类型',file_upload_limit : '10',file_queue_limit : '0',//选择文件按钮设置button_image_url : '/resources/00/image/fileupbutton.png',button_placeholder_id : 'fileupload_selectfile_span',button_width: 72,button_height: 21,button_cursor: -2, //SWFUpload.CURSOR.HANDbutton_window_mode: 'opaque', //SWFUpload.WINDOW_MODE.OPAQUE//FLAS插件URLflash_url:'/resources/00/js/swfupload.swf',post_params : {},custom_settings : {},debug: false};。

swfupload 文件上传与下载

swfupload 文件上传与下载

文件上传与下载一、文件上传与下载所需要文件(*.js,*.css,*.swf)1.存放位置总共7个相关文件;2.引入包的位置跟平时引入js一样,这儿需要引入5个相关文件。

<link href="<%=request.getContextPath()%>/swfupload/default.css"rel="stylesheet" type="text/css"/><script type="text/javascript"src="<%=request.getContextPath()%>/swfupload/swfupload.js"></script> <script type="text/javascript"src="<%=request.getContextPath()%>/swfupload/swfupload.queue.js"></script> <script type="text/javascript"src="<%=request.getContextPath()%>/swfupload/fileprogress.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/swfupload/handlers.js"></script>二、设置需要上传的数据库字段(jsp页面)1.比如在内容管理下,有基础学习模块,其中有一个字段是accessory现在进行一下设置:<td width="85%"><div style="float: left; margin-top: 5px;"><stripes:text name="webContent.accessory"style="width:400px;background-color:#FFFFFF;"id="up"readonly="readonly"/></div><div id="find"><div id="upload_button"><span id="spanButtonPlaceHolder"></span></div><div><stripes:button name=""id="buttonCancel"value="取消"disabled="disabled"onclick="swfu.cancelQueue();"/></div><div style="margin: 8px 0 0 10px;float: left;"><span for="valid_webContent.accessory"><stripes:notice field="webContent.accessory" /></span></div></div><div class="fieldset flash"id="fsUploadProgress"></div></td>a. name="webContent.accessory",这是你要上传数据库字段。

文件上传之SWFUpload插件代码

文件上传之SWFUpload插件代码

这篇文章主要介绍了文件上传之SWFUpload插件(代码),实现此代码主要分为两部分:1.前台文件index.html和2.后台文件upload.php,需要的朋友可以参考下下面通过一段代码给大家演示下,主要分为 1.前台文件index.html和 2.后台文件upload.php。

具体代码如下所示:代码如下:1.前台文件index.html&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="/1999/xhtml" &gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;&lt;head&gt;&lt;title&gt;SWFUpload&lt;/title&gt;&lt;link href="css/default.css" rel="stylesheet" type="text/css" /&gt;&lt;!--Swfupload插件begin--&gt;&lt;script type="text/javascript" src="swfupload/swfupload.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="js/swfupload.queue.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="js/fileprogress.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="js/handlers.js"&gt;&lt;/script&gt;&lt;!--Swfupload插件end--&gt;&lt;script type="text/javascript"&gt;var swfu;window.onload = function() {var settings = {flash_url : "swfupload/swfupload.swf",upload_url: "upload.php", // 后台文件post_params: {"PHPSESSID" : "&lt;?php echo session_id(); ?&gt;"},file_size_limit : "100 MB",file_types : "*.*",file_types_description : "All Files",file_upload_limit : 100,file_queue_limit : 0,custom_settings : {progressTarget : "fsUploadProgress",cancelButtonId : "btnCancel"},debug: false,// 按钮设置button_image_url: "images/TestImageNoText_65x29.png", // Flash样式图片文件button_width: "65",button_height: "29",button_placeholder_id: "spanButtonPlaceHolder",button_text: '&lt;span class="theFont"&gt;浏览&lt;/span&gt;',button_text_style: ".theFont { font-size: 16; }",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};swfu = new SWFUpload(settings);};&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="header"&gt;&lt;h1 id="logo"&gt;&lt;a href="/"&gt;SWFUpload&lt;/a&gt;&lt;/h1&gt;&lt;div id="version"&gt;v2.2.0&lt;/div&gt;&lt;/div&gt;&lt;div id="content"&gt;&lt;form id="form1" action="index.php" method="post" enctype="multipart/form-data"&gt;&lt;p&gt;点击“浏览”按钮,选择您要上传的文档文件后,系统将自动上传并在完成后提示您。

wagoupload使用手册

wagoupload使用手册

wagoupload使用手册(实用版)目录1.Wagoupload 使用手册概述2.安装与配置 Wagoupload3.使用 Wagoupload 进行文件上传4.使用 Wagoupload 进行文件管理5.高级功能与设置6.常见问题与解决方案7.总结正文【Wagoupload 使用手册概述】Wagoupload 是一款功能强大的文件上传和管理工具,适用于个人和企业用户。

本手册将为您提供详细的使用指南,帮助您充分发挥Wagoupload 的功能优势。

【安装与配置 Wagoupload】1.下载并安装 Wagoupload,按照安装向导的提示进行操作。

2.配置 Wagoupload,根据您的需求设置文件上传的大小限制、文件类型、上传目录等。

【使用 Wagoupload 进行文件上传】1.打开 Wagoupload 界面,选择“上传文件”功能。

2.选择需要上传的文件,点击“上传”按钮。

3.待文件上传完成后,您可以在“文件管理”中查看已上传的文件。

【使用 Wagoupload 进行文件管理】1.在“文件管理”页面,您可以对已上传的文件进行删除、重命名、移动等操作。

2.通过搜索功能,快速定位所需文件。

3.设置文件的访问权限,确保文件的安全性。

【高级功能与设置】1.使用 Wagoupload 的高级功能,如批量上传、断点续传、文件版本管理等。

2.根据需要进行个性化设置,提高使用体验。

【常见问题与解决方案】1.文件上传失败:检查网络连接、文件大小和类型是否符合要求。

2.文件管理问题:查看文件权限、存储空间是否充足。

3.其他问题:参考官方文档或联系技术支持。

【总结】Wagoupload 是一款实用的文件上传和管理工具,可以帮助您轻松实现文件的快速上传、安全管理和高效利用。

SWFUpload多文件上传手册

SWFUpload多文件上传手册

SWFUp‎l oad中文文档地‎址是:/doc/swfup‎l oad/Docum‎e ntat‎i on.html 网官上的D‎E MO为:http://demo.swfup‎l /v220/index‎.htm下载地址:http://code.googl‎/p/swfup‎l oad/SWFUp‎l oad最初是由Vinte‎r webb‎.se开发的一个‎客户端的上‎传工具. 它结合了F‎L ASH和‎J avaS‎c ript‎的功能,以提供一种‎超越了传统‎的浏览器中‎<input‎type="file" />标签提供的‎文件上传功‎能。

SWFUp‎l oad提‎供的主要功‎能:∙在文件选择‎对话框中能‎够进行文件‎多选∙页面无刷新‎的上传∙提供上传进‎度的事件回‎调,实时显示上‎传进度∙良好的浏览‎器兼容性∙采用了命名‎空间以兼容‎其它JS的‎库 (例如 jQuer‎y, Proto‎t ype, 等等) ∙∙对FLAS‎H 9和FLA‎S H 10播放器‎的支持(V2.2.0版本放弃‎了对Fla‎s h 8的支持)SWFUp‎l oad背‎后的设计思‎想和其它基‎于Flas‎h的上传工‎具是不同的‎。

它将浏览器‎的中UI交‎给开发人员‎来控制。

开发人员能‎够利用XH‎T ML,CSS,Javas‎c ript‎来定制符合‎他们网站风‎格的UI上‎传元素。

然后使用它‎提供的一组‎简单的JS‎事件来更新‎上传状态,开发人员能‎够利用这些‎事件来及时‎更新页面中‎的上传进度‎U I。

不幸的是F‎l ash Playe‎r 10 更严格的安‎全机制迫使‎我们不得不‎将一个Fl‎a sh Butto‎n放入Fl‎a sh影片‎中。

SWFUp‎l oad提‎供API供‎开发者通过‎图片、文字、CSS 的方‎式来自定制‎更灵活的U‎I显示。

SWFUp‎l oad v2SWFUp‎l oad v2包含了‎新的高级功‎能,改善了稳定‎性,解决了Fl‎a shPl‎a yer中‎的一些bu‎g,并且提供一‎套有用的插‎件。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

SWFUpload中文文档地址是:/doc/swfupload/Documentation.html 网官上的DEMO为:/v220/index.htm下载地址:/p/swfupload/SWFUpload最初是由Vinterwebb.se开发的一个客户端的上传工具. 它结合了FLASH和JavaScript的功能,以提供一种超越了传统的浏览器中<inputtype="file" />标签提供的文件上传功能。

SWFUpload提供的主要功能:∙在文件选择对话框中能够进行文件多选∙页面无刷新的上传∙提供上传进度的事件回调,实时显示上传进度∙良好的浏览器兼容性∙采用了命名空间以兼容其它JS的库 (例如 jQuery, Prototype, 等等) ∙∙对FLASH 9和FLASH 10播放器的支持(V2.2.0版本放弃了对Flash 8的支持)SWFUpload背后的设计思想和其它基于Flash的上传工具是不同的。

它将浏览器的中UI交给开发人员来控制。

开发人员能够利用XHTML,CSS,Javascript来定制符合他们网站风格的UI上传元素。

然后使用它提供的一组简单的JS事件来更新上传状态,开发人员能够利用这些事件来及时更新页面中的上传进度UI。

不幸的是Flash Player 10 更严格的安全机制迫使我们不得不将一个Flash Button放入Flash影片中。

SWFUpload提供API供开发者通过图片、文字、CSS 的方式来自定制更灵活的UI显示。

SWFUpload v2SWFUpload v2包含了新的高级功能,改善了稳定性,解决了FlashPlayer中的一些bug,并且提供一套有用的插件。

新的功能包括:∙兼容了Flash Player 10的安全限制问题∙在文件上传的同时能够发送额外的POST数据∙针对每一个文件上传发送POST/GET数据∙更直观的事件回调∙动态修改实例设置∙接收服务端返回的数据∙非取消形式的停止文件上传∙自定义上传的顺序∙支持单文件、多文件的文件的选择∙文件入队数量,文件上传数量和文件大小的限制∙更合理地处理0字节的文件∙针对每个文件在上传前都提供一个最后确认的时间回调∙解决了v1.0.2版本中未描述到的关于Flash的bug∙解决的v1.0.2中的bug:o在IE中,刷新的时候FLASH无法加载(详细可见我之前的debug 过程)o在FireFox中,如果窗口的滚动条没有回滚到顶部,那么Flash 无法加载o Race-conditions when files are cached∙兼容 FormsSWFUpload v2 延续了SWFUpload的设计目标,将UI分离以交给开发人员控制和后续扩展概述传统的HTML上传标准的HTML上传表单为用户提供一个文本框和按钮来选择文件,选中的文件是随着form表单提交的。

整个文件上传完成之后,下一个页面才会显示,并且不能对选择的文件做预设的文件检验,例如文件大小限制,文件类型限制。

当文件上传时,用户获得的可用的反馈信息很少。

传统的HTML上传模式十分简单,线性的,几乎所有浏览器都支持它。

SWFUploadSWFUpload使用一个Flash影片来控制文件的选择和上传。

此FLASH中包含一个用户自定制UI的按钮,点击该按钮能够激活Flash本身的高级文件上传对话框,它能够根据用户的设置来进行单文件或者是多文件的上传。

选择的的文件类型也是可以被限制的,因此用户只能选择指定的适当的文件,例如*.jgp;*.gif。

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

因此V2.2.0版本在SWF中添加了一个可定制的Button让用户交互来打开文件对话框。

当选定文件以后,每个文件都会被验证和处理。

当Flash上传文件的时候,由开发人员预定义的Javascript事件会被定时触发以便来更新页面中的UI,同时还提供上传状态和错误信息。

选定的文件的上传和它所在页面、表单是独立的。

每个文件都是单独上传的,这就保证了服务端脚本能够在一个时间点更容易地处理单个文件。

虽然Flash提供了上传服务,但是页面并不会提交或者重新载入。

相比于标准的HTML Form,SWFUpload的使用方式更像是AJAX程序,页面中的Form会和FLASH控制的文件上传单独处理。

入门SWFUpload并不是拖放式的上传控件,它需要JavaScript和DOM的知识。

一些可用的演示展示了它能够完成什么事情以及它是如何完成这些常见的任务。

SWFUpload由4部分组成:1.初始化和设置(Javascript)2.JavaScript 库: SWFUpload.js3. SWFUpload.swf(V2.2.0版本放弃了对flash 8的支持)4.事件处理(Javascript)使用SWFUpload遇到的多数问题是由不正确地设置或者定义了糟糕的处理事件引起的。

初始化和设置SWFpload必须在页面中初始化,一般可以在window.onload事件中完成此操作。

它的构造函数需要一个Object类型的设置对象。

这个设置对象一般是一个直接定义的Object类型变量,直接传递给SWFUpload的构造函数。

初始化的SWFUpload对象的引用需要保留下来,因为当显示文件选择对话框和启动文件上传的时候需要这个实例的引用。

例如:用直接定义的Object类型变量设置初始化SWFUpload对象var swfu; window.onload = function () {swfu = new SWFUpload({upload_url : "/upload.php",flash_url : "/swfupload.swf",button_placeholder_id : "spanSWFUploadButton",file_size_limit : "20480" });};例如:用存储在变量中的设置对象初始化SWFUpload对象var swfu; window.onload = function () { var settings_object = { upload_url : "/upload.php", flash_url :"/swfupload.swf", button_placeholder_id : "spanSWFUploadButton", file_size_limit : "20480" }; swfu = new SWFUpload(settings_object); };JavaScript 库该JavaScript库文件(swfupload.js)应该包含在需要上传功能的页面中。

当SWFUpload创建完成并能访问它的一系列功能时,开发人员可以来控制此实例。

例如:添加SWFUpload.js到页面中<script type="text/javascript"src="/swfupload.js"></script>例如:根据需要的设置来初始化SWFUploadvar swfu = new SWFUpload({ upload_url :"/upload.php", flash_url :"/swfupload.swf", button_placeholder_id : "spanSWFUploadButton" });Flash 控制元素SWFUpload JavaScript库动态加载Flash控制元素(swfupload.swf)。

Flash控制元素的文件地址在初始化的时候就应该在SWFUpload设置对象中定义。

Flash控制元素是一个很小的的Flash影片,它提供了文件浏览、检验和上传功能。

它在页面中展现给用户的是一个UI可自定制的按钮,但该Flash会在需要时候通过与Javascript通信来通知浏览器处理更新。

事件处理开发人员必须定义一系列JavaScript函数来处理SWFUpload事件回调,当一些不同的重要事件发生的时候,这些函数会被触发。

通过处理SWFUpload的事件,开发人员能够提供关于上传进度、出错信息以及上传完成等的信息反馈。

例如: swfupload的处理事件和初始化// uploadStart处理事件。

该函数变量在设置对象中指定给了upload_start_handler属性。

var uploadStartEventHandler = function (file) { var continue_with_upload; if ( === "the sky is blue"){ continue_with_upload = true; } else { continue_with_upload = false; } return continue_with_upload; }; //uploadSuccess处理事件。

该函数变量在设置对象中指定给了upload_success_handler属性。

var uploadSuccessEventHandler = function (file, server_data) { alert("The file " + + " has been delivered to the server."); alert("The server responded with " + server_data); }; //创建SWFUpload实例,设置事件回调函数 var swfu = new SWFUpload({ upload_url :"/upload.php", flash_url :"/swfupload.swf", file_size_limit : "20480", upload_start_handler : uploadStartEventHandler, upload_success_handler : uploadSuccessEventHandler });SWFUpload JavaScript 对象构造函数SWFUpload(settings object)返回:一个SWFUpload 实例var swfupload_instance = new SWFUpload(settings_object);全局变量和常量SWFUpload定义了一些全局变量和常量,这对SWFUpload的高级应用程序和处理错误都是很有用的,它们都是只读的。

相关文档
最新文档