SWFUpload的使用:
SWFUpload採用czpae86的UploadPanel二次開發,在此鳴謝。
SWFUpload下載最新版本swfupload.swf.v2.5.0.beta3.2.zip,你會發現文件夾裏只有swfupload.swf文件,並沒有swfupload.js----調用flash的接口文件,定義了很多函數和參數,這裏鬱悶了半天,後面下載了SWFUpload_v250_beta_3_samples.zip,果斷在實例文件夾裏找到了這個最新版本的swfupload.js文件,兩個文件與czpae86的UploadPanel文件放在同一目錄,使用該面板的方法請參照他發的博客,其實也很簡單,如下:
Ext.onReady(function(){
Ext.QuickTips.init();
new Ext.Window({
width : 650,
title : 'swfUpload demo',
height : 300,
layout : 'fit',
items : [
{
xtype:'uploadPanel',
border : false,
fileSize : 1024*550,//限制文件大小
uploadUrl : 'uploadFiles.action',
flashUrl : 'swfupload.swf',
filePostName : 'file', //後臺接收參數
fileTypes : '*.*',//可上傳文件類型
postParams : {savePath:'upload\\'} //上傳文件存放目錄
}
]
}).show();
});
uploadPanel.js修改如下:
var keel={};
keel.UploadPanel = function(cfg){
this.width = 510;
this.height = 200;
Ext.apply(this,cfg);
this.gp = new Ext.grid.EditorGridPanel({//修改爲可編輯表格
border :false,
selModel: new Ext.grid.RowSelectionModel({
}),
store: new Ext.data.Store({
fields:['id','name','type','size','state','percent','detail']
}),
columns: [
new Ext.grid.RowNumberer(),
{header: '文件名', width: 150, sortable: true,dataIndex: 'name', menuDisabled:true},
{header: '類型', width: 50, sortable: true,dataIndex: 'type', menuDisabled:true},
{header: '大小', width: 70, sortable: true,dataIndex: 'size', menuDisabled:true,renderer:this.formatFileSize},
{header: '文件說明', width: 100, sortable: true,dataIndex: 'detail', menuDisabled:true,editor: {xtype: 'textfield'}},//-------二次修改------
{header: '進度', width: 150, sortable: true,dataIndex: 'percent', menuDisabled:true,renderer:this.formatProgressBar,scope:this},
{header: '狀態', width: 70, sortable: true,dataIndex: 'state', menuDisabled:true,renderer:this.formatFileState,scope:this},
{header: ' ',width:40,dataIndex:'id', menuDisabled:true,renderer:this.formatDelBtn}
]
});
this.setting = {
upload_url : this.uploadUrl,
flash_url : this.flashUrl,
file_size_limit : this.fileSize || (1024*50) ,//上傳文件體積上限,單位MB
file_post_name : this.filePostName,
file_types : this.fileTypes||"*.*", //允許上傳的文件類型
file_types_description : "All Files", //文件類型描述
file_upload_limit : "0", //限定用戶一次性最多上傳多少個文件,在上傳過程中,該數字會累加,如果設置爲“0”,則表示沒有限制
//file_queue_limit : "10",//上傳隊列數量限制,該項通常不需設置,會根據file_upload_limit自動賦值
post_params : this.postParams||{Detail:'ok'} ,
use_query_string : true,
debug : false,
button_cursor : SWFUpload.CURSOR.HAND,
button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
custom_settings : {//自定義參數
scope_handler : this
},
file_queued_handler : this.onFileQueued,
swfupload_loaded_handler : function(){},// 當Flash控件成功加載後觸發的事件處理函數
file_dialog_start_handler : function(){},// 當文件選取對話框彈出前出發的事件處理函數
file_dialog_complete_handler : this.onDiaogComplete,//當文件選取對話框關閉後觸發的事件處理
upload_start_handler : this.onUploadStart,// 開始上傳文件前觸發的事件處理函數
upload_success_handler : this.onUploadSuccess,// 文件上傳成功後觸發的事件處理函數
swfupload_loaded_handler : function(){},// 當Flash控件成功加載後觸發的事件處理函數
upload_progress_handler : this.uploadProgress,
upload_complete_handler : this.onUploadComplete,
upload_error_handler : this.onUploadError,
file_queue_error_handler : this.onFileError
};
keel.UploadPanel.superclass.constructor.call(this,{
tbar : [
{text:'添加文件',iconCls:'btn-add',ref:'../addBtn'},'-',
{text:'上傳',ref:'../uploadBtn',iconCls:'btn-up',handler:this.startUpload,scope:this},'-',
{text:'停止上傳',ref:'../stopBtn',iconCls:'btn-cancel',handler:this.stopUpload,scope:this,disabled:true},'-',
{text:'刪除所有',ref:'../deleteBtn',iconCls:'btn-clear',handler:this.deleteAll,scope:this},'-'
],
layout : 'fit',
items : [this.gp],
listeners : {
'afterrender':function(){
var em = this.getTopToolbar().get(0).el.child('em');
var placeHolderId = Ext.id();
em.setStyle({
position : 'relative',
display : 'block'
});
em.createChild({
tag : 'div',
id : placeHolderId
});
this.swfupload = new SWFUpload(Ext.apply(this.setting,{
button_width : em.getWidth(),
button_height : em.getHeight(),
button_placeholder_id :placeHolderId
}));
this.swfupload.uploadStopped = false;
Ext.get(this.swfupload.movieName).setStyle({
position : 'absolute',
top : 0,
left : 0
});
},
scope : this,
delay : 100
}
});
}
Ext.extend(keel.UploadPanel,Ext.Panel,{
toggleBtn :function(bl){
this.addBtn.setDisabled(bl);
this.uploadBtn.setDisabled(bl);
this.deleteBtn.setDisabled(bl);
this.stopBtn.setDisabled(!bl);
this.gp.getColumnModel().setHidden(7,bl);
},
onUploadStart : function(file) {
var post_params = this.settings.post_params;
Ext.apply(post_params,{//處理中文參數問題
//fileName : file.name,
fileName : encodeURIComponent(file.name)
});
this.setPostParams(post_params); //-------二次修改------
var det="";
var me = this.customSettings.scope_handler;
var ds = me.gp.store;
for(var i=0;i<ds.getCount();i++){
var record =ds.getAt(i);
if(record.get('id')==file.id)
det=record.get('detail');
}
this.addFileParam(file.id ,"detail",det);//-------二次修改------
},
startUpload : function() {
if (this.swfupload) {
if (this.swfupload.getStats().files_queued > 0) {
this.swfupload.uploadStopped = false;
this.toggleBtn(true);
this.swfupload.startUpload();
}
}
},
formatFileSize : function(_v, celmeta, record) {
return Ext.util.Format.fileSize(_v);
},
formatFileState : function(n){//文件狀態
switch(n){//-------二次修改------
case -1 : return '<img src="/skin/images/152.png"/><span style="color:green;"> 未上傳</span>';
break;
case -2 : return '<img src="/skin/images/147.png"/><span style="color:brown;"> 正在上傳</span>';
break;
case -3 : return '<img src="/skin/images/151.png"/><span style="color:red;"> 上傳失敗</span>';
break;
case -4 : return '<img src="/skin/images/102.png"/><span style="color:green;"> 上傳成功</span>';
break;
case -5 : return '<img src="/skin/images/050.png"/><span style="color:#CECEFF;"> 取消上傳</span>';
break;
default: return n;//-------二次修改------
}
},
formatProgressBar : function(v){
var progressBarTmp = this.getTplStr(v);
return progressBarTmp;
},
getTplStr : function(v){
var bgColor = "orange";
var borderColor = "#008000";
return String.format(
'<div>'+
'<div style="border:1px solid {0};height:10px;width:{1}px;margin:4px 0px 1px 0px;float:left;">'+
'<div style="float:left;background:{2};width:{3}%;height:10px;"><div></div></div>'+
'</div>'+
'<div style="text-align:center;float:right;width:40px;margin:3px 0px 1px 0px;height:10px;font-size:12px;">{3}%</div>'+
'</div>', borderColor,(90),bgColor, v);
},
onUploadComplete : function(file) {
var me = this.customSettings.scope_handler;
if(file.filestatus==-4){
var ds = me.gp.store;
for(var i=0;i<ds.getCount();i++){
var record =ds.getAt(i);
if(record.get('id')==file.id){
record.set('percent', 100);
if(record.get('state')!=-3){
record.set('state', file.filestatus);
}
record.commit();
}
}
}
if (this.getStats().files_queued > 0 && this.uploadStopped == false) {
this.startUpload();
}else{
me.toggleBtn(false);
me.linkBtnEvent();
}
},
onFileQueued : function(file) {
var me = this.customSettings.scope_handler;
var rec = new Ext.data.Record({
id : file.id,
name : file.name,
size : file.size,
type : file.type,
state : file.filestatus,
percent : 0
})
me.gp.getStore().add(rec);
},
onUploadSuccess : function(file, serverData) {
var me = this.customSettings.scope_handler;
var ds = me.gp.store;
if (Ext.util.JSON.decode(serverData).success) {
for(var i=0;i<ds.getCount();i++){
var rec =ds.getAt(i);
if(rec.get('id')==file.id){
rec.set('state', file.filestatus);
rec.commit();
}
}
}else{
for(var i=0;i<ds.getCount();i++){
var rec =ds.getAt(i);
if(rec.get('id')==file.id){
rec.set('percent', 0);
rec.set('state', -3);
rec.commit();
}
}
}
me.linkBtnEvent();
caF(file,serverData);//上傳成功後調用自定義函數
},
uploadProgress : function(file, bytesComplete, totalBytes){//處理進度條
var me = this.customSettings.scope_handler;
var percent = Math.ceil((bytesComplete / totalBytes) * 100);
percent = percent == 100? 99 : percent;
var ds = me.gp.store;
for(var i=0;i<ds.getCount();i++){
var record =ds.getAt(i);
if(record.get('id')==file.id){
record.set('percent', percent);
record.set('state', file.filestatus);
record.commit();
}
}
},
onUploadError : function(file, errorCode, message) {
var me = this.customSettings.scope_handler;
me.linkBtnEvent();
var ds = me.gp.store;
for(var i=0;i<ds.getCount();i++){
var rec =ds.getAt(i);
if(rec.get('id')==file.id){
rec.set('percent', 0);
rec.set('state', file.filestatus);
rec.commit();
}
}
},
onFileError : function(file,n){
switch(n){
case -100 : tip('待上傳文件列表數量超限,不能選擇!');
break;
case -110 : tip('文件太大,不能選擇!');
break;
case -120 : tip('該文件大小爲0,不能選擇!');
break;
case -130 : tip('該文件類型不可以上傳!');
break;
}
function tip(msg){
Ext.Msg.show({
title : '提示',
msg : msg,
icon : Ext.Msg.WARNING,
buttons :Ext.Msg.OK
});
}
},
onDiaogComplete : function(){
var me = this.customSettings.scope_handler;
me.linkBtnEvent();
},
stopUpload : function() {
if (this.swfupload) {
this.swfupload.uploadStopped = true;
this.swfupload.stopUpload();
}
},
deleteAll : function(){
var ds = this.gp.store;
for(var i=0;i<ds.getCount();i++){
var record =ds.getAt(i);
var file_id = record.get('id');
this.swfupload.cancelUpload(file_id,false);
}
ds.removeAll();
this.swfupload.uploadStopped = false;
},
formatDelBtn : function(v){
return "<a href='#' id='"+v+"' style='color:blue' class='link-btn' ext:qtip='移除該文件'>移除</a>";
},
linkBtnEvent : function(){
Ext.select('a.link-btn',false,this.gp.el.dom).on('click',function(o,e){
var ds = this.gp.store;
for(var i=0;i<ds.getCount();i++){
var rec =ds.getAt(i);
if(rec.get('id')==e.id){
ds.remove(rec);
}
}
this.swfupload.cancelUpload(e.id,false);
},this);
}
});
Ext.reg('uploadPanel',keel.UploadPanel);
其中標識部分爲自己的二次修改,下面就主要問題說明一下:
1、uploadUrl爲後臺處理文件,和一般上傳的處理端一樣,只是後臺接收文件參數由filePostName決定,這裏特別的說說postParams這個參數,該參數直接加到地址上傳遞,包括使用addFileParam()增加的參數也一樣,後臺接收採用Request.QueryString[""]形式。
2、swfupload.swf和swfupload.js的版本請使用同一版本,因爲本人之前使用了czpae86實例中的swfupload.js文件,發現及及報錯。
3、後臺上傳成功或失敗返回格式如下: Response.Write("{success:true,msg:'文檔上傳成功!'}"),swfupload只識別success:true或者false。
4、本後臺上傳文件後將文件信息保存至數據庫,其中加入PDF,SWF字段標識是否已轉爲該格式文檔,方便後臺的文檔轉換服務程序訪問。
5、最後效果如圖:
其中文件上傳成功後調用了caF(file,serverData)函數,本函數主要作用就是在相關附件表格里加入該記錄,供文件預覽等操作。
如需轉載,請儘量保留此申明,並在文章頁面明顯位置給出原文連接。謝謝!