ext3.x+swfupload + struts1.2 上传文件的问题！

Question

下面是uploadpanel.js的源码var keel={};keel.UploadPanel = function(cfg){
this.width = 510;
this.height = 200;
Ext.apply(this,cfg);
this.gp = new Ext.grid.GridPanel({
border :false,
store: new Ext.data.Store({
fields:['id','name','type','size','state','percent']
}),
    columns: [
     new Ext.grid.RowNumberer(),
        {header: '文件名', width: 100, sortable: true,dataIndex: 'name', menuDisabled:true},
        {header: '类型', width: 70, sortable: true,dataIndex: 'type', menuDisabled:true},
        {header: '大小', width: 100, sortable: true,dataIndex: 'size', menuDisabled:true,renderer:this.formatFileSize},
        {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||{savePath:'upload\\'},
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:'add',ref:'../addBtn'},'-',
{text:'上传',ref:'../uploadBtn',iconCls:'up',handler:this.startUpload,scope:this},'-',
{text:'停止上传',ref:'../stopBtn',iconCls:'delete',handler:this.stopUpload,scope:this,disabled:true},'-',
{text:'删除所有',ref:'../deleteBtn',iconCls:'delete2',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 : -2
});
},
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(6,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);  
},
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 '未上传';
break;
case -2 : return '正在上传';
break;
case -3 : return '<div style="color:red;">上传失败</div>';
break;
case -4 : return '上传成功';
break;
case -5 : return '取消上传';
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();
},
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,
width : 280,
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);

Answer 1

下面是swfupload.js源码！var SWFUpload;if (SWFUpload == undefined) {
SWFUpload = function (settings) {
this.initSWFUpload(settings);
};
}SWFUpload.prototype.initSWFUpload = function (settings) {
try {
this.customSettings = {}; // A container where developers can place their own settings associated with this instance.
this.settings = settings;
this.eventQueue = [];
this.movieName = "SWFUpload_" + SWFUpload.movieCount++;
this.movieElement = null;
// Setup global control tracking
SWFUpload.instances[this.movieName] = this; // Load the settings.  Load the Flash movie.
this.initSettings();
this.loadFlash();
this.displayDebugInfo();
} catch (ex) {
delete SWFUpload.instances[this.movieName];
throw ex;
}
};/* *************** */
/* Static Members  */
/* *************** */
SWFUpload.instances = {};
SWFUpload.movieCount = 0;
SWFUpload.version = "2.2.0 2009-03-25";
SWFUpload.QUEUE_ERROR = {
QUEUE_LIMIT_EXCEEDED    : -100,
FILE_EXCEEDS_SIZE_LIMIT   : -110,
ZERO_BYTE_FILE    : -120,
INVALID_FILETYPE    : -130
};
SWFUpload.UPLOAD_ERROR = {
HTTP_ERROR    : -200,
MISSING_UPLOAD_URL        : -210,
IO_ERROR    : -220,
SECURITY_ERROR    : -230,
UPLOAD_LIMIT_EXCEEDED    : -240,
UPLOAD_FAILED    : -250,
SPECIFIED_FILE_ID_NOT_FOUND : -260,
FILE_VALIDATION_FAILED    : -270,
FILE_CANCELLED    : -280,
UPLOAD_STOPPED : -290
};
SWFUpload.FILE_STATUS = {
QUEUED  : -1,
IN_PROGRESS  : -2,
ERROR  : -3,
COMPLETE  : -4,
CANCELLED  : -5
};
SWFUpload.BUTTON_ACTION = {
SELECT_FILE  : -100,
SELECT_FILES : -110,
START_UPLOAD : -120
};
SWFUpload.CURSOR = {
ARROW : -1,
HAND : -2
};
SWFUpload.WINDOW_MODE = {
WINDOW : "window",
TRANSPARENT : "transparent",
OPAQUE : "opaque"
};// Private: takes a URL, determines if it is relative and converts to an absolute URL
// using the current site. Only processes the URL if it can, otherwise returns the URL untouched
SWFUpload.completeURL = function(url) {
if (typeof(url) !== "string" || url.match(/^https?:\/\//i) || url.match(/^\//)) {
return url;
}

var currentURL = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ":" + window.location.port : "");

var indexSlash = window.location.pathname.lastIndexOf("/");
if (indexSlash <= 0) {
path = "/";
} else {
path = window.location.pathname.substr(0, indexSlash) + "/";
}

return /*currentURL +*/ path + url;

};
/* ******************** */
/* Instance Members  */
/* ******************** */// Private: initSettings ensures that all the
// settings are set, getting a default value if one was not assigned.
SWFUpload.prototype.initSettings = function () {
this.ensureDefault = function (settingName, defaultValue) {
this.settings[settingName] = (this.settings[settingName] == undefined) ? defaultValue : this.settings[settingName];
};

// Upload backend settings
this.ensureDefault("upload_url", "");
this.ensureDefault("preserve_relative_urls", false);
this.ensureDefault("file_post_name", "Filedata");
this.ensureDefault("post_params", {});
this.ensureDefault("use_query_string", false);
this.ensureDefault("requeue_on_error", false);
this.ensureDefault("http_success", []);
this.ensureDefault("assume_success_timeout", 0);

// File Settings
this.ensureDefault("file_types", "*.*");
this.ensureDefault("file_types_description", "All Files");
this.ensureDefault("file_size_limit", 0); // Default zero means "unlimited"
this.ensureDefault("file_upload_limit", 0);
this.ensureDefault("file_queue_limit", 0); // Flash Settings
this.ensureDefault("flash_url", "swfupload.swf");
this.ensureDefault("prevent_swf_caching", true);

// Button Settings
this.ensureDefault("button_image_url", "");
this.ensureDefault("button_width", 1);
this.ensureDefault("button_height", 1);
this.ensureDefault("button_text", "");
this.ensureDefault("button_text_style", "color: #000000; font-size: 16pt;");
this.ensureDefault("button_text_top_padding", 0);
this.ensureDefault("button_text_left_padding", 0);
this.ensureDefault("button_action", SWFUpload.BUTTON_ACTION.SELECT_FILES);
this.ensureDefault("button_disabled", false);
this.ensureDefault("button_placeholder_id", "");
this.ensureDefault("button_placeholder", null);
this.ensureDefault("button_cursor", SWFUpload.CURSOR.ARROW);
this.ensureDefault("button_window_mode", SWFUpload.WINDOW_MODE.WINDOW);

// Debug Settings
this.ensureDefault("debug", false);
this.settings.debug_enabled = this.settings.debug; // Here to maintain v2 API

// Event Handlers
this.settings.return_upload_start_handler = this.returnUploadStart;
this.ensureDefault("swfupload_loaded_handler", null);
this.ensureDefault("file_dialog_start_handler", null);
this.ensureDefault("file_queued_handler", null);
this.ensureDefault("file_queue_error_handler", null);
this.ensureDefault("file_dialog_complete_handler", null);

this.ensureDefault("upload_start_handler", null);
this.ensureDefault("upload_progress_handler", null);
this.ensureDefault("upload_error_handler", null);
this.ensureDefault("upload_success_handler", null);
this.ensureDefault("upload_complete_handler", null);

this.ensureDefault("debug_handler", this.debugMessage); this.ensureDefault("custom_settings", {}); // Other settings
this.customSettings = this.settings.custom_settings;

// Update the flash url if needed
if (!!this.settings.prevent_swf_caching) {
this.settings.flash_url = this.settings.flash_url + (this.settings.flash_url.indexOf("?") < 0 ? "?" : "&") + "preventswfcaching=" + new Date().getTime();
}

if (!this.settings.preserve_relative_urls) {
//this.settings.flash_url = SWFUpload.completeURL(this.settings.flash_url); // Don't need to do this one since flash doesn't look at it
this.settings.upload_url = SWFUpload.completeURL(this.settings.upload_url);
this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);
}

delete this.ensureDefault;
};// Private: loadFlash replaces the button_placeholder element with the flash movie.
SWFUpload.prototype.loadFlash = function () {
var targetElement, tempParent; // Make sure an element with the ID we are going to use doesn't already exist
if (document.getElementById(this.movieName) !== null) {
throw "ID " + this.movieName + " is already in use. The Flash Object could not be added";
} // Get the element where we will be placing the flash movie
targetElement = document.getElementById(this.settings.button_placeholder_id) || this.settings.button_placeholder; if (targetElement == undefined) {
throw "Could not find the placeholder element: " + this.settings.button_placeholder_id;
} // Append the container and load the flash
tempParent = document.createElement("div");
tempParent.innerHTML = this.getFlashHTML(); // Using innerHTML is non-standard but the only sensible way to dynamically add Flash in IE (and maybe other browsers)
targetElement.parentNode.replaceChild(tempParent.firstChild, targetElement); // Fix IE Flash/Form bug
if (window[this.movieName] == undefined) {
window[this.movieName] = this.getMovieElement();
}

};
....................

Answer 2

ext3里没有enctype属性直接设置，要设置enctype的话要用fileUpload : true这个属性，这样enctype 就会自动设置

Answer 3

fileUpload : true该属性是普通form表单的设置方式，我用的是swfupload，现在已设置，可还是不行！！！

Answer 4

你遇到的问题"java.lang.IllegalArgumentException: argument type mismatch" 确定是出在enctype上吗?我对Java EE不是特别了解，有没有可能出在其他地方?有个笨办法设置enctype是在提交表单时，但是好像不太符合你的要求new Ext.Window({
  title: 'test',
  closable: true,
  height: 400,
  width: 400,
  items: [{
    id: 'myForm',
    xtype: 'form',
    defaultType: 'textfield',
    items: [{
      name: 'myField',
      anchor: '100%'
    }],
    buttons:[{
      text: 'submit',
      handler: function(b,e){
        var f = Ext.getCmp('myForm').getForm();
        f.submit({
          url: 'test.php',
          headers: {'Content-Type':'multipart/form-data; charset=UTF-8'},
        });
      }
    }]
  }]
}).show();
还有个办法是有一个Awesome Uploader的extjs的控件，它包含了你需要的功能还支持拖拽功能挺强大的，有没有可能把现在用的控件换成它试一下？不确定一定能决绝但也是个办法。下载地址是 http://jsjoy.com/blog/ext-js-extension-awesome-uploader如果你那下不了pm我，我可帮你上传到论坛下。

Answer 5

 josephSC  我试了。还有一点问题
不管怎么说都谢谢你！

Answer 6

这个控件包含了swfupload所以它是基于flash的，这个错误好像是由于它和flash连接的问题。 你试一下在你的upload url 后面加上 ;jsessionid=XXX 看能不能解决另外试一下其它浏览器FF, Opera, Chrome, IE8/IE7...看有没有类似问题

Answer 7

jsessionid 前面的分号别忘了

Answer 8

  我很久没用EXT了，这个问题后来没管了。