文件上传利器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中文教本新

个 个 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

文件上传插件SWFUpload的使用指南

文件上传插件SWFUpload的使用指南

⽂件上传插件SWFUpload的使⽤指南SWFUpload是⼀个flash和js相结合⽽成的⽂件上传插件,其功能⾮常强⼤。

以前在项⽬中⽤过⼏次,但它的配置参数太多了,⽤过后就忘记怎么⽤了,到以后要⽤时⼜得到官⽹上看它的⽂档,真是太烦了。

所以索性就把它的⽤法记录下来,也⽅便英语拙计的同学查看,利⼈利⼰,⼀劳永逸。

(ps:SWFUpload早就不再更新了,官⽹也打不开了,推荐⼤家使⽤Plupload来代替SWFUpload,Plupload以html5上传⽅式为主,在不⽀持html5的浏览器中会⾃动回退到flash的上传⽅式,功能灰常强⼤!使⽤⽅法可以看我写的《前端上传组件Plupload使⽤指南》)SWFUpload的特点:1、⽤flash进⾏上传,页⾯⽆刷新,且可⾃定义Flash按钮的样式;2、可以在浏览器端就对要上传的⽂件进⾏限制;3、允许⼀次上传多个⽂件,但会有⼀个上传队列,队列⾥⽂件的上传是逐个进⾏的,服务器端接收⽂件时跟普通的表单上传⽂件是⼀样的;4、提供了丰富的事件接⼝供开发者使⽤;SWFUpload的⽂件上传流程是这样的:1、引⼊相应的js⽂件2、实例化SWFUpload对象,传⼊⼀个配置参数对象进⾏各⽅⾯的配置。

3、点击SWFUpload提供的Flash按钮,弹出⽂件选取窗⼝选择要上传的⽂件;4、⽂件选取完成后符合规定的⽂件会被添加到上传的队列⾥;5、调⽤startUpload⽅法让队列⾥⽂件开始上传;6、⽂件上传过程中会触发相应的事件,开发者利⽤这些事件来更新ui、处理错误、发出提⽰等等;SWFUpload包括三部分的内容:SWFUpload.js、swfupload.swf、初始化配置参数及各种事件处理函数。

所以⾸先在页⾯引⼊SWFUpload.js<script src='SWFUpload.js'></script>然后实例化⼀个SWFUpload对象:var swfu;window.onload = function () {var settings_object = {//定义参数配置对象upload_url : "/upload.php",flash_url : "/swfupload.swf",file_post_name : "Filedata",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,requeue_on_error : false,http_success : [201, 202],assume_success_timeout : 0,file_types : "*.jpg;*.gif",file_types_description: "Web Image Files",file_size_limit : "1024",file_upload_limit : 10,file_queue_limit : 2,debug : false,prevent_swf_caching : false,preserve_relative_urls : false,button_placeholder_id : "element_id",button_image_url : "/button_sprite.png",button_width : 61,button_height : 22,button_text : "<b>Click</b> <span class="redText">here</span>",button_text_style : ".redText { color: #FF0000; }",button_text_left_padding : 3,button_text_top_padding : 2,button_action : SWFUpload.BUTTON_ACTION.SELECT_FILES,button_disabled : false,button_cursor : SWFUpload.CURSOR.HAND,button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,swfupload_loaded_handler : swfupload_loaded_function,file_dialog_start_handler : file_dialog_start_function,file_queued_handler : file_queued_function,file_queue_error_handler : file_queue_error_function,file_dialog_complete_handler : file_dialog_complete_function,upload_start_handler : upload_start_function,upload_progress_handler : upload_progress_function,upload_error_handler : upload_error_function,upload_success_handler : upload_success_function,upload_complete_handler : upload_complete_function,debug_handler : debug_function,};swfu = new SWFUpload(settings_object);//实例化⼀个SWFUpload,传⼊参数配置对象};/*定义各种事件监听函数*/function swfupload_loaded_function(){}function file_dialog_start_function(){}...等等我们看到要实现⼀个swfupload上传功能很简单,就是实例化⼀个swfupload对象。

SWFUpload 多文件上传手册

SWFUpload 多文件上传手册

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表单提交的。

wagoupload使用手册

wagoupload使用手册

wagoupload使用手册Wagoupload 使用手册目录1. 介绍2. 安装3. 配置4. 使用a. 文件上传b. 管理文件c. 文件共享5. 安全性6. 常见问题解答7. 结论1. 介绍Wagoupload 是一款开源的文件上传工具,可以方便地将文件上传到云端存储空间。

它提供了简单易用的用户界面,支持多种云存储服务提供商,并且具有高度的可扩展性和灵活性。

2. 安装为了使用 Wagoupload,您需要确保您的计算机已安装以下软件和工具:- 服务器:Apache 或 Nginx- PHP(版本 5.6 或更高)- Composer(PHP 包管理器)安装 Wagoupload 的步骤如下:1. 从 GitHub 下载最新的 Wagoupload 源代码。

2. 解压缩下载文件,并将文件复制到您的 Web 服务器的目录下。

3. 在命令行中进入 Wagoupload 所在目录,并执行 `composer install` 命令以安装依赖项。

4. 根据您的服务器配置,进行必要的权限设置和配置更改。

5. 在您的 Web 浏览器中访问 Wagoupload 的 URL,检查是否已成功安装。

3. 配置在开始使用 Wagoupload 之前,您需要配置一些参数。

首先,复制 `.env.example` 文件并重命名为 `.env`。

然后,打开 `.env` 文件,在其中设置以下参数:- `APP_URL`:Wagoupload 的 URL 地址。

- `STORAGE_DRIVER`:指定您要使用的云存储服务提供商(如 AWS S3、Google Cloud Storage 等)。

- `STORAGE_KEY`:云存储服务提供商的身份验证密钥。

- `STORAGE_SECRET`:云存储服务提供商的身份验证密钥密钥。

- `STORAGE_BUCKET`:存储空间的名称。

- `STORAGE_REGION`:存储空间所在的区域。

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;点击“浏览”按钮,选择您要上传的文档文件后,系统将自动上传并在完成后提示您。

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

文件上传利器SWFUpload使用指南
SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大。

以前在项目中用过几次,但它的配置参数太多了,用过后就忘记怎么用了,到以后要用时又得到官网上看它的文档,真是太烦了。

所以索性就把它的用法记录下来,也方便英语拙计的同学查看,利人利己,一劳永逸。

SWFUpload的特点:
1、用flash进行上传,页面无刷新,且可自定义Flash按钮的样式;
2、可以在浏览器端就对要上传的文件进行限制;
3、允许一次上传多个文件,但会有一个上传队列,队列里文件的上传是逐个进行的,服务器端接收文件时跟普通的表单上传文件是一样的;
4、提供了丰富的事件接口供开发者使用;
SWFUpload的文件上传流程是这样的:
1、引入相应的js文件
2、实例化SWFUpload对象,传入一个配置参数对象进行各方面的配置。

3、点击SWFUpload提供的Flash按钮,弹出文件选取窗口选择要上传的文件;
4、文件选取完成后符合规定的文件会被添加到上传的队列里;
5、调用startUpload方法让队列里文件开始上传;
6、文件上传过程中会触发相应的事件,开发者利用这些事件来更新ui、处理错误、发出提示等等;SWFUpload包括三部分的内容:SWFUpload.js、swfupload.swf、初始化配置参数及各种事件处理函数。

所以首先在页面引入SWFUpload.js
然后实例化一个SWFUpload对象:
我们看到要实现一个swfupload上传功能很简单,就是实例化一个swfupload对象。

但繁琐的地方就在于实例化实要用到的参数配置对象,以及各种事件的发生时机以和提供的参数。

所以重点来了。

下面几个表格对开发中要用到的东西列举了出来,虽然已经蛮多了,但并不是swfupload的全部,我列出来的只是常用的。

要查看完整的文档,请到swfupload官网上查询。

一、配置参数对象中的常用属性及说明
二、各种事件说明
要实现与用户的交互,靠的就是在这些事件上做文章了
三、swfupload实例的方法
方法中大多数是动态改变参数配置对象的方法
四、文件信息对象File Object
在事件监听函数中,经常要用到文件信息对象来获取文件的信息以供下一步的操作
五、队列状态对象Stats Object
用来获取当前队列的状况
六、一些常量
定义的一些常量,便于理解
内容太多了,感觉有点乱了,如果还不清楚怎么使用,建议看下官网的使用流程,明白怎么使用后再来看这些属性、事件、方法、常量什么的吧。

原文地址:/2050/archive/2012/08/29/2662932.html。

相关文档
最新文档