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,并且提供一‎套有用的插‎件。

SwfUpload在IE10上不出现上传按钮的解决...

SwfUpload在IE10上不出现上传按钮的解决...

SwfUpload在IE10上不出现上传按钮的解决...在系统测试过程中发现使用了SwfUpload实现的无刷新上传功能在IE 上竟然无法使用了难道SwfUpload不支持吗?还是需要换一种实现方式呢?最后通过了解SwfUplad JS文件发现我们是可以修改的让其支持IE 具体解决方案如下打开SwfUpload js 在js文件中找到// Private: getFlashHTML generates the object tag needed to embed the flash in to the document”这行和“// Private: getFlashVars builds the parameter string that will be passed”和这行然后把中间的用如下代码替换就OK了复制代码代码如下: SWFUpload prototype getFlashHTML = function (flashVersion) { // Flash Satay object syntax: var classid = ""; var Sys = {}; var ua = navigator userAgent toLowerCase(); if (window ActiveXObject) { Sys ie = ua match(/msie ([d ]+)/)[ ]; if (Sys ie && Sys ie substring( ) == " " || Sys ie substring( ) == " ") { classid = classid = "clsid:d cdb e ae d cf b " ; } } return [ <object classid id=" this movieName " type=application/x shockwave flash data=" (this support imageResize ? this settings flash_url : this settings flash _url) " width= this settings button_width height= this settings button_height class="swfupload"> <param name=wmode value=" this settings button_window_mode " /> <param name=movie value=" (this support imageResize ? this settings flash_url : this settings flash _url) " /> <param name=quality value="high" /> <param name=allowScriptAccess value="always" /> <param name=flashvars value=" + this getFlashVars() + " /> </object> ] join(""); }; lishixinzhi/Article/program/Java/JSP/201311/20171。

SWFUpload技术文档

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<script type="text/javascript" src="jslib/handlers.js" charset="utf-8"></script><script type="text/javascript">var swfUpload;window.onload = function() {var settings = {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 : "All Files",file_upload_limit : 50,file_queue_limit : 0,custom_settings : {progressTarget : "fsUploadProgress",cancelButtonId : "btnCancel"},debug: true,//是否显示调试的textarea// Button settingsbutton_image_url:"images/TestImageNoText_65x29.png",button_width: "65",button_height: "29",button_placeholder_id: "spanButtonPlaceHolder",button_text: '<span class="theFont">浏览</span>',button_text_style: ".theFont { font-size: 12; }",button_text_left_padding: 12,button_text_top_padding: 3,// The event handler functions are defined in handlers.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 = new SWFUpload(settings);swfUpload.stopped = false;};function fileDialogComplete(numberselected, numberqueued) {if (swfUpload.getStats().files_queued > 0) {document.getElementById("btnCancel").disabled = false;}}function queueComplete(numberselected, numberqueued) { //alert(numberselected + "-" + numberqueued);}function upload() {if (swfUpload.getStats().files_queued > 0) {//document.getElementById("btnCancel").disabled = true;swfUpload.startUpload();} else {alert("请选择要上传的文件!");}}function stop() {if (swfUpload) {swfUpload.stopUpload();}}</script></head><body><div id="content"><h2></h2><form id="form1" action="" method="post"enctype="multipart/form-data"><p></p><div class="fieldset flash" id="fsUploadProgress"><span class="legend">上传文件列表</span></div><div id="divMovieContainer"><input id="filenamelist" type="hidden"name="filenamelist" /><span id="spanButtonPlaceHolder"></span><input type="button" value="上传"onclick="upload();" style="margin-left: 2px; font-size: 8pt; height: 29px;" /><input type="button" value="停止"onclick="stop();" style="display: none; margin-left: 2px; font-size: 8pt; height: 29px;" /><input id="btnCancel" type="button" value="取消所有" onclick="swfUpload.cancelQueue();" disabled="disabled"style="margin-left: 2px; font-size: 8pt; height: 29px;" /><input type="button"onclick="javaScript:window.close();" name="bt" style="margin-left: 2px; font-size: 8pt; height: 29px;" value="关闭" /></div></form></div></body></html>A.先介绍导入的js文件<link rel="stylesheet" type="text/css" href="css/default.css"><script type="text/javascript" src="jslib/swfupload.js"></script><script type="text/javascript"src="jslib/swfupload.queue.js"></script><script type="text/javascript" src="jslib/fileprogress.js"></script><script type="text/javascript" src="jslib/handlers.js" charset="utf-8"></script>这些文件是必须的,且在导入的时候注意你的路径和顺序。

SWFUpload_v2.5中文API 介绍

SWFUpload_v2.5中文API 介绍

SWFUpload v2.5.0 DocumentationSWFUpload 2.5.0版官方说明文档中文翻译版Table of Contents 内容列表详情请点击翻译:yukon12345 2010.6.101.SWFUpload2.SWFUpload 版本 23.概览(Overview)4.入门( Getting Started)5.js对象(SWFUpload JavaScript Object)1.构造器(Constructor)2.全局变量和常量(Globals and Constants)1.【新增内容】instances2.movieCount3.【新增内容】QUEUE_ERROR4.【新增内容】UPLOAD_ERROR5.【新增内容】FILE_STATUS6.【新增】UPLOAD_TYPE7.【新增内容】BUTTON_ACTION8.【新增内容】CURSOR9.【新增内容】BUTTON_WINDOW_MODE10.【新增】RESIZE_ENCODING11.【新增】onload3.属性 Properties1.【新增内容】customSettings2.movieName4.方法 Methods1.addSetting不推荐(deprecated)2.getSetting不推荐(deprecated)3.retrieveSetting已移除(removed in v2.1.0)4.destroy添加自2.1.0 (added in v2.1.0)5.displayDebugInfo6.selectFile7.selectFiles8.startUpload9.【新增】startResizedUpload (added in v2.5.0)10.cancelUpload11.stopUpload12.【新增】requeueUpload13.getStats14.setStats15.getFile16.【新增】getQueueFile (added in v2.5.0)17.addPostParam18.removePostParam19.addFileParam20.removeFileParam21.setUploadURL22.setPostParams23.setFileTypes24.setFileSizeLimit25.setFileUploadLimit26.setFileQueueLimit27.setFilePostName28.setUseQueryString29.setDebugEnabled30.setButtonImageURL (added in v2.2.0)31.setButtonDimensions (added in v2.2.0)32.setButtonText (added in v2.2.0)33.setButtonTextStyle (added in v2.2.0)34.setButtonTextPadding (added in v2.2.0)35.setButtonDisabled (added in v2.2.0)36.setButtonAction (added in v2.2.0)37.setButtonCursor (added in v2.2.0)5.【新增内容】事件 Events1.flashReady2.【新增】swfUploadPreload3.【新增】swfUploadLoadFailed4.【新增】swfUploadLoaded5.【新增】buttonAction6.fileDialogStart7.fileQueued8.【新增内容】fileQueueError9.fileDialogComplete10.【新增】uploadResizeStart11.uploadStart12.uploadProgress13.uploadError14.【新增】uploadSuccess15.uploadComplete16.debug6.实用功能对象 SWFUpload Utility Objects1.Settings Object2.Settings Description3.【新】Support Object4.File Object5.Stats Object6.相关插件 SWFUpload Plug-ins7.【新增内容】已知问题 Known IssuesSWFUploadSWFUpload最初是Vinterwebb.se开发的客户端文件上传工具。

ckeditor自定义按钮整合swfupload批量上传图片

ckeditor自定义按钮整合swfupload批量上传图片

ckeditor添加自定义按钮整合swfupload实现批量上传图片给ckeditor添加自定义按钮,由于ckeditor只能上传一张图片,如果要上传多张图片就要结合ckfinder,而ckfinder是收费的,所以就想通过自定义按钮整合swfupload实现一次上传多张图片的功能1、首先下载并安装ckeditor。

2、下载swfupload解压拷贝到对应的文件目录下3、自定义工具栏按钮:我们可以自定义ckeditor工具栏要显示的按钮,工具栏按钮定义可以参考这里。

现在我们需要向工具栏添加一个自定义功能的按钮。

ckeditor工具栏中的每个按钮都是作为插件定义在ckeditor\plugins\目录中。

我们在ckeditor\plugins\中创建一个新文件夹imagedef。

在imagedef文件夹内,我们创建一个plugin.js文件,它的代码如下:CKEDITOR.plugins.add("imagedef",{requires:["dialog"], //当按钮触发时弹出对话框init:function (a){a.addCommand("imagedef", new CKEDITOR.dialogCommand("imagedef"));a.ui.addButton("Imagedef",{label:"图片",command:"imagedef",icon:this.path + "imagedef.gif"});CKEDITOR.dialog.add("imagedef", this.path + "dialogs/imagedef.js");}});在上面的代码中我们指定自定义按钮的图标imagedef.gif,imagedef.gif放在imagedef文件夹中。

整合了下批量上传可以拖动排序【swfupload】

整合了下批量上传可以拖动排序【swfupload】

整合了下批量上传可以拖动排序【swfupload】分享下tp整合的swfupload插件,实现ajax上传、拖动排序。

有不合理的地⽅望⼤⽜们别喷。

1、这属于第三⽅控件,我们先建⼀个Vendor存放第三⽅控件。

当然也可以⽤别名。

2、控件中handlers.js我改过。

我是为了取得本控件中返回上传后图⽚名称,赋值给⽂本域。

通过这个⽂本域进⾏更新数据库。

进⾏排序。

function fileQueueError(file, errorCode, message){try {var imageName = window.path+"/images/error.gif";var errorName = "";if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) {errorName = "您上传的⽂件过多!";}if (errorName !== "") {alert(errorName);return;}switch (errorCode) {case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:imageName = window.path+"/images/zerobyte.gif";break;case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:imageName = window.path+"/images/toobig.gif";break;case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:default:alert(message);break;}addImage(imageName);}catch (ex) {this.debug(ex);}}function fileDialogComplete(numFilesSelected, numFilesQueued){try {if (numFilesQueued > 0) {this.startUpload();}}catch (ex) {this.debug(ex);}}function uploadProgress(file, bytesLoaded){try {var percent = Math.ceil((bytesLoaded / file.size) * 100);var progress = new FileProgress(file, this.customSettings.upload_target);progress.setProgress(percent);if (percent === 100) {progress.setStatus("创建缩略图中");progress.toggleCancel(false, this);}else {progress.setStatus("上传中");progress.toggleCancel(true, this);}}catch (ex) {this.debug(ex);}}function uploadSuccess(file, serverData){serverData=serverData.split('<')[0]addImage(serverData);serverData=serverData.split('goods/')[1];//这⾥做截取,获取名称以|连接加⼊隐藏域s中。

SWFUpload附件上传与下载处理中文乱码以及Linux和windows环境下注意事项

SWFUpload附件上传与下载处理中文乱码以及Linux和windows环境下注意事项

Java开发在windows下和linux下的区别注意项
开发一般都是在windows下进行,界面友好方便,开发速度比Linux快。

Linux只是安全性高,将已经开发好的程序布置到Linux上去而已。

一般我们都是在windows下开发,项目部署的时候都会发布在linux环境下。

由于Java的跨平台性,一次编译可以在不同的平台运行;基本与开发环境无关在windows下和linux下开发几乎没有区别,但开发和部署的时
候有一些小的细节我们要注意,我总结了一点供大家参考:
一、路径的问题
Windows下文件的分隔符“\”
Linux下文件的分隔符“/”
由于我们经常都是在windows环境下开发的,所以对文件的读写,用到路径的地方有许多人习惯的用“\\”,在windows的环境下正常,可是到了linux环境下就会报错了,所以尽量用File.separator获得路径的分割符。

图片:
二、编码的方式问题
一般情况下,我们常用的WindowsXP的默认编码字符集是GBK,Linux的默认编码字符集utf-8或其他的编码方式。

我们开发时,经常会有一些对字节流等流的操作,有许多会进
行临时文件的存储和读取,这时候我们都会用到编码字符集,所以在部署项目的时候要把服务器的编码字符集修改成我们项目用到的编码方式,这样避免一些会出现的乱码问题。

另外,有时我们用一些上传文件的工具从windows环境上传到linux环境下时,有时会出现乱码问题,例如我们常用的winscp上传项目文件到linux环境下时有的时候就会出现乱码问题。

图片:
项目中设置编码
设置服务器编码server.xml文件中
三、相关案例
码一致。

Asp.net环境下Flash多文件上传

Asp.net环境下Flash多文件上传

很多时候在做完自己的是以后都喜欢来园子里面看看,但多数时候是学习,今天闲来之于也学学写点东西今天在公司做一个上传图片的东西于是就在gg上找了一个php+swf上传的东西没有办法公司用的是.net于是就动手改动了代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http:// /TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" ><head runat="server"><title>无标题页</title><style>.swiff-uploader-box a {display: none !important;}/* .hover simulates the flash interactions */a:hover, a.hover {color: red;}#demo-status {padding: 10px 15px;width: 420px;border: 1px solid #eee;}#demo-status .progress {background: url(progress.gif) no-repeat;background-position: +50% 0;margin-right: 0.5em;vertical-align: middle;}#demo-status .progress-text {font-size: 0.9em;font-weight: bold;}#demo-list {list-style: none;width: 450px;margin: 0;}#demo-list li.validation-error {padding-left: 44px;display: block;clear: left;line-height: 40px;color: #8a1f11;cursor: pointer;border-bottom: 1px solid #fbc2c4;background: #fbe3e4 url(failed.png) no-repeat 4px 4px;}#demo-list li.file {border-bottom: 1px solid #eee;background: url(file.png) no-repeat 4px 4px;overflow: auto;}#demo-list li.file.file-uploading {background-image: url(uploading.png);background-color: #D9DDE9;}#demo-list li.file.file-success {background-image: url(success.png);}#demo-list li.file.file-failed {background-image: url(failed.png);692}#demo-list li.file .file-name {font-size: 1.2em;margin-left: 44px;display: block;clear: left;line-height: 40px;height: 40px;font-weight: bold;}#demo-list li.file .file-size {font-size: 0.9em;line-height: 18px;float: right;margin-top: 2px;margin-right: 6px;}#demo-list li.file .file-info {display: block;margin-left: 44px;font-size: 0.9em;line-height: 20px;clear}#demo-list li.file .file-remove {clear: right;float: right;line-height: 18px;margin-right: 6px;}</style><script type="text/javascript" src="mootools.js"></script><script type="text/javascript" src="Swiff.Uploader.js"></script><script type="text/javascript" src="Fx.ProgressBar.js"></script><script type="text/javascript" src="Lang.js"></script>693<script type="text/javascript" src="FancyUpload2.js"></script><script type="text/javascript">/* <![CDATA[ *//*** FancyUpload Showcase** @license MIT License* @author Harald Kirschner <mail [at] digitarald [dot] de>* @copyright Authors*/window.addEvent('domready', function() { // wait for the content// our uploader instancevar up = new FancyUpload2($('demo-status'), $('demo-list'), { // op tions object// we console.log infos, remove that in production!!verbose: true,// url is read from the form, so you just have to change one pl aceurl: $('form-demo').action,// path to the SWF filepath: 'Swiff.Uploader.swf',// remove that line to select all files, or edit it, add more i temstypeFilter: {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.g if; *.png'},// this is our browse button, *target* is overlayed with the Fl694ash movietarget: 'demo-browse',// graceful degradation, onLoad is only called if all went wel l with FlashonLoad: function() {$('demo-status').removeClass('hide'); // we show the actua l UI$('demo-fallback').destroy(); // ... and hide the plain for m// We relay the interactions with the overlayed flash to th e linkthis.target.addEvents({click: function() {return false;},mouseenter: function() {this.addClass('hover');},mouseleave: function() {this.removeClass('hover');this.blur();},mousedown: function() {this.focus();}});// Interactions for the 2 other buttons$('demo-clear').addEvent('click', function() {up.remove(); // remove all filesreturn false;});695$('demo-upload').addEvent('click', function() {up.start(); // start uploadreturn false;});},// Edit the following lines, it is your custom event handling/*** Is called when files were not added, "files" is an array of invalid File classes.** This example creates a list of error elements directly in th e file list, which* hide on click.*/onSelectFail: function(files) {alert(files);files.each(function(file) {new Element('li', {'class': 'validation-error',html: file.validationErrorMessage || file.validatio nError,title: ng.get('FancyUpload', 'removeTitl e'),events: {click: function() {this.destroy();}}}).inject(this.list, 'top');}, this);},/*** This one was directly in FancyUpload2 before, the event make696s it* easier for you, to add your own response handling (you proba bly want* to send something else than JSON or different items).*/onFileSuccess: function(file, response) {var json = new Hash(JSON.decode(response, true) || {});if (json.get('status') == '1') {file.element.addClass('file-success');.set('html', '<strong>Image was uploaded:</str ong> Width:' + json.get('width') + 'px, Height:' + json.get('height') + 'px, <em>Mime:' + json.get('mime') + '</em>');//alert(response);} else {file.element.addClass('file-failed');//alert(response);.set('html', '<strong>An error occured:</stron g> ' + (json.get('error') ? (json.get('error') + ' #' + json.get('code ')) : response));}},/*** onFail is called when the Flash movie got bashed by some bro wser plugin* like Adblock or Flashblock.*/onFail: function(error) {switch (error) {case'hidden': // works after enabling the movie and cl icking refreshalert('To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).');break;case'blocked': // This no *full* fail, it works afte697r the user clicks the buttonalert('To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).');break;case'empty': // Oh oh, wrong pathalert('A required file was not found, please be pat ient and we fix this.');break;case'flash': // no flash 9+ :(alert('To enable the embedded uploader, install th e latest Adobe Flash plugin.')}}});});/* ]]> */</script></head><body><div id="demo"><form action="script.aspx" method="post" enctype="multipart/form-data " id="form-demo"><fieldset id="demo-fallback"><legend>File Upload</legend><p>This form is just an example fallback for the unobtrusive b ehaviour of FancyUpload.If this part is not changed, something must be wrong with y our code.</p><label for="demo-photoupload">Upload a Photo:698<input type="file" name="Filedata" /></label></fieldset><div id="demo-status"class="hide"><p><a href="#" id="demo-browse">选择图片</a> |<a href="#" id="demo-clear">清除图片</a> |<a href="#" id="demo-upload">开始上传</a></p><div><strong class="overall-title"></strong><br /><img src="bar.gif"class="progress overall-progress" /></div><div><strong class="current-title"></strong><br /><img src="bar.gif"class="progress current-progress" /></div><div class="current-text"></div></div><ul id="demo-list"></ul></form></div></body></html>这里是前台的后台处理图片如下代码if (Request.Files.Count != 0){HttpFileCollection fc = Request.Files;699for (int i = 0; i < fc.Count; i++){try{object s = fc[i];System.Web.HttpPostedFile pf = (System.Web.HttpPost edFile)s;pf.SaveAs(Server.MapPath("pic/" + pf.FileName));//Image img=new Image( );//img.ImageUrl = Server.MapPath("pic/" + pf.FileNam e);//img.Width//Response.Write("{\"width\":\"10249\",\"height\":\ "51\",\"mime\":\"42.4000\"}");Response.Write("{\"status\":\"1\",\"name\":\"\",\"h ash\":\"\",\"width\":250,\"height\":12,\"mime\":\"image\"}");}catch{Response.Write("{\"status\":\"1\",\"name\":\"\",\"h ash\":\"\",\"width\":250,\"height\":12,\"mime\":\"image\"}");}}}else{string s = "something wrong";}好了这里就处理完了应该来说还是很有效果图:7007013702。

SWFUpload V2.2.0 说明文档

SWFUpload V2.2.0 说明文档

SWFUpload V2.2.0 说明文档更新时间:2008-11-07TOC1.SWFUpload2.SWFUpload 23.概述4.入门5.SWFUpload JavaScript 对象1.构造器2.全局变量和常量1.instances2.movieCount3.QUEUE_ERROR4.UPLOAD_ERROR5.FILE_STATUS6.Default Event Handlers7.BUTTON_ACTION(added in v2.2.0)8.BUTTON_CURSOR(added in v2.2.0)9.BUTTON_WINDOW_MODE(added in v2.2.0)3.属性1.customSettings2.movieName4.方法1.addSetting (不推荐使用)2.getSetting (不推荐使用)3.retrieveSetting (v2.1.0中已删除)4.destroy (v2.1.0中新增)5.displayDebugInfo6.selectFile (不推荐使用)7.selectFiles (不推荐使用)8.startUpload9.cancelUpload10.stopUpload11.getStats12.setStats13.getFile14.addPostParam15.removePostParam16.addFileParam17.removeFileParam18.setUploadURL19.setPostParams20.setFileTypes21.setFileSizeLimit22.setFileUploadLimit23.setFileQueueLimit24.setFilePostName25.setUseQueryString26.setDebugEnabled27.setButtonImageURL (added in v2.2.0)28.setButtonDimensions (added in v2.2.0)29.setButtonText (added in v2.2.0)30.setButtonTextStyle (added in v2.2.0)31.setButtonTextPadding (added in v2.2.0)32.setButtonDisabled (added in v2.2.0)33.setButtonAction (added in v2.2.0)34.setButtonCursor (added in v2.2.0)5.事件1.flashReady2.swfUploadLoaded3.fileDialogStart4.fileQueued5.fileQueueError6.fileDialogComplete7.uploadStart8.uploadProgress9.uploadError10.uploadSuccess11.uploadComplete12.debug6.SWFUpload 功能对象1.Settings Object2.Settings Description3.File Object4.Stats Object6.SWFUpload 插件(未译)7.存在的问题(未译)SWFUploadSWFUpload最初是由Vinterwebb.se开发的一个客户端的上传工具. 它结合了FLASH和JavaScript的功能,以提供一种超越了传统的浏览器中<input type="file" />标签提供的文件上传功能。

  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的高级应用程序和处理错误都是很有用的,它们都是只读的。

相关文档
最新文档