swfupload/extjs3，添加按钮没反应的问题

点击添加文件按钮，什么反应都没有，extjs3.0
IE8，已经安装了flashplayer
例子可以正常操作。
但是集成到项目中出错。


keel.UploadPanel.superclass.constructor.call(this,{                
        tbar : [
            {text:'添加文件1',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 grid = this.get(1).get(0);
//                var em = grid.getTopToolbar().get(0).el.child('em');
                var em = this.getTopToolbar().get(0).el.child('em');
                //var em = Ext.getCmp("myToolbar").items.get(0).el.child('em')
//                if (!em) {//Ie8
//                    var el = this.getDockedItems()[0].getComponent(0).getEl(); //jujun el : Ext.Element
//                              em = el.child('table');
//                }

其中swfupload。swf在webroot下面有。
flashurl修改成 swfupload.swf去掉/cerp3x后缀一样不行
将swf放在与这个打开页面一个地方也不行

new Ext.Window({
        width : 650,
        title : '1231231',
        height : 300,
        layout : 'fit',
        items : [
            {
                xtype:'uploadPanel',
                border : false,
                fileSize : 1024*50,
                uploadUrl : 'projectFileUpLoad?mode=file&node='+id+'&projectCode='+projectCode+'&projectName='+projectName,
                flashUrl : '/CERP3x/swfupload.swf',
                filePostName : 'file',
                fileTypes : '*.*',
                postParams : {savePath:'upload\\'}
            }
        ]
    }).show();

8 个解决方案

#1

uploadPanel是你自己扩展的插件？

注意swf的路径是相对于当家加载的页面，不是相对于js

不行就用绝对路径，从网站根目录加载 /xx/xx/xx/swfupload.swf

#2

谢谢回复。
相对于当前加载的页面。
最后一副图中。
uploadPanel.js
跟swfupload。swf
在一层目录下面。

#3

从网站跟目录就是
/CERP/swfupload.swf
其中Cerp是webcontent目录
这样也不行。也是找不到，很纠结。

#4

'http://localhost:8080/CERP3x/js/swfupload.swf',
也不管用

#5

/swfupload.swf

不知道你插件怎么写的，贴出来看看，要注意接收uploadUrl这种配置然后按照swfupload的方法来生成上传按钮

#6

使用SwfUpload插件做批量上传，我使用Extjs4.0.7可以使用，但是使用Extjs4.2.1Q点击添加文件没有反映

求大虾帮忙看看这是什么问题，哪里错了，不胜感激！

swfupload/extjs3，添加按钮没反应的问题

代码如下：
index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script>
    var basePath = "<%=basePath%>";
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=basePath%>script/ext-4.2.1/ext-all.js"></script>
<script type="text/javascript" src="<%=basePath%>script/ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>script/ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=basePath%>swfuploadExt4.2.1/UploadPanel.js"></script>
<script type="text/javascript" src="<%=basePath%>swfuploadExt4.2.1/swfupload.js"></script>
<script type="text/javascript" src="<%=basePath%>swfuploadExt4.2.1/plugins/swfupload.speed.js"></script>
<script type="text/javascript" src="<%=basePath%>swfuploadExt4.2.1/plugins/swfupload.queue.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
    new Ext.window.Window({
        title : 'swfUpload demo',
        width : 650,
        height : 300,
        layout : 'fit',
        items : [
            {
                xtype:'fileuploadPanel',
                border : false,
                fileSize : 1024*4000, //限制文件大小单位是字节
                uploadUrl : 'uploadFiles.action', //提交的action路径
                flashUrl : 'swfupload.swf', //swf文件路径
                filePostName : 'uploads', //后台接收参数
                fileTypes : '*.*',//可上传文件类型
                postParams : {savePath:'upload\\'} //http请求附带的参数
            }
        ]
    }).show();
    
});
</script>
</head>
<body>
<a href="<%=basePath %>index.jsp">返回首页</a>
<div id="div1"></div>
</body>
</html>

UploadPanel.js后面继续发，这里不够写了
项目目录如下
swfupload/extjs3，添加按钮没反应的问题

#7

UploadPanel.js

Ext.define("Org.fileupload.FileModel",{
	extend:"Ext.data.Model",
	fields : [ 'id', 'name', 'type', 'size', 'filestatus', 'percent' ]

});
Ext.define("Org.fileupload.Panel", {
	extend : "Ext.panel.Panel",
	alias : "widget.fileuploadPanel",
	layout:"fit",
	initComponent : function() {
		this.width=510;
		this.height=200;
		this.continuous=false;//是否连续上传，true为连续上传队列后其他文件,false只上传当前队列开始的文件
		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 : true,
				button_cursor : SWFUpload.CURSOR.HAND,
				button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
				custom_settings : {//自定义参数
					scope_handler : this
				},
				swfupload_loaded_handler : function(){
					window.console.log("swf组件成功初始化");
				},// 当Flash控件成功加载后触发的事件处理函数
				file_dialog_start_handler : function(){},// 当文件选取对话框弹出前出发的事件处理函数
				file_dialog_complete_handler : function(){},//当文件选取对话框关闭后触发的事件处理
				upload_start_handler : function(){},// 开始上传文件前触发的事件处理函数
				upload_success_handler : function(){},// 文件上传成功后触发的事件处理函数 
				upload_progress_handler :this.uploadProgress,
				upload_complete_handler : this.uploadComplete,
				upload_error_handler : this.onFileError,
				file_queue_error_handler :  this.onFileError,
				file_queued_handler:this.onQueued
		};
		this.items = [ {
			listeners:{
				'itemcontextmenu':function(myself,model,item,index,e,eopt){
					var rightClick = Ext.create('Ext.menu.Menu', {
										autoDestroy:true,
										items : [{
													scope:this.ownerCt,
													text : '开始上传',
													handler:function(){
														window.console.log("点击开始上传");
														this.swfupload.customSettings.scope_handler.continuous=false;
														this.swfupload.startUpload(model.get("id"));
														window.console.log(model.get("id"));
														model.set("filestatus",-2);
													},
													icon:"image/icons/upload.gif"
												}, {
													text : '取消上传',
													scope:this.ownerCt,
													handler:function(){
														this.swfupload.cancelUpload(model.get("id"),false);
														model.set("filestatus",SWFUpload.FILE_STATUS.CANCELLED);
														model.commit();
														var stats=this.swfupload.getStats();
														var label=Ext.getCmp("queue_id");
														label.setText(label.text="队列中文件个数:"+stats.files_queued);
													},
													icon:"image/icons/remove.png"
												}],
										listeners:{
											show:function(myself,o){
												if(model.get("filestatus")!=-1){
													myself.items.getAt(0).setDisabled(true);
												}
												if(model.get("filestatus")==-4){
													myself.items.getAt(1).setDisabled(true);
												}
											}
										}
									});
							e.preventDefault(); 
    				  rightClick.showAt(e.getXY()); 
					window.console.log("鼠标右键点击");
				}
			},
			xtype : "grid",
			border : false,
			store : Ext.create("Ext.data.Store",{
				model:"Org.fileupload.FileModel",
				storeId:"fileItems"
			}),
			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.formatProgress,
				scope:this,
				hidden:true
			}, {
				header : '状态',
				width : 100,
				sortable : true,
				dataIndex : 'filestatus',
				renderer:this.formatFileState,
				scope : this
			}, {
				header : '&nbsp;',
				width : 40,
				dataIndex : 'id',
				menuDisabled : true,
				renderer : this.formatDelBtn,
				hidden:true
			} ]

		}];
		this.tbar=[
			{
			    text:'添加文件',
			    id:"btnAdd",
			    icon:"image/icons/add.png"
			},'-',
			{
			    text:'上传全部未开始上传文件',
			    scope:this,
			    icon:"image/icons/upload.gif",
			    handler:function(){
    				var store = Ext.data.StoreManager.lookup("fileItems");
    				this.continuous=true;
    				for (var index = 0; index <store.getCount(); index++) {
    					var model=	store.getAt(index);
    					if(model.get("filestatus")==-1){
    						this.swfupload.startUpload(model.get("id"));
    						model.set("filestatus",-2);
    						model.commit();
    					}
    				}
			    }
			},'-',
			{
				text : '停止上传',
				handler : function() {
					this.swfupload.stopUpload();

				},
				icon : "image/icons/cancel.png",
				scope : this
			},'-', 
			{
				text : '清空列表',
				handler : function() {
					this.swfupload.cancelQueue();
					var store = Ext.data.StoreManager.lookup("fileItems");
					store.removeAll();
					var stats=this.swfupload.getStats();
					var label=Ext.getCmp("queue_id");
					label.setText(label.text="队列中文件个数:"+stats.files_queued);
				},
				icon : "image/icons/remove.png",
				scope:this
			},'-', 
			{
				xtype : 'label',
				id:"queue_id",
				text : '队列中文件个数:0',
				margins : '0 0 0 10'
			}
		 ];
		this.bbar=[
    		{xtype:"progressbar",id:"progressBar",text:"0%",width:200},
    		{xtype:"label",text:"平均速度：0kb/s",id:"currentSpeed",width:200},'-',
    		{xtype:"label",text:"剩余时间：0s",id:"timeRemaining",width:200}
		];
		this.listeners={
			'afterrender':function(){
				window.console.log("渲染完成， 添加swf所需的设置");
				var em=Ext.get(Ext.query("#btnAdd>em")[0]);
				if(!em){
					//此处为IE9一下版本的兼容问题的临时解决办法，目前还是不支持IE6
					em=Ext.get("btnAdd-btnWrap");
				}
				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',
					left :"0px"
				});	
			}
		};

		this.callParent();
		scope : this;
		delay : 100;
	},
	onQueued:function(file){
		var stats=this.getStats();
		var label=Ext.getCmp("queue_id");
		label.setText(label.text="队列中文件个数:"+stats.files_queued);
		var f=Ext.create("Org.fileupload.FileModel",{
			id: file.id,
			name : file.name,
			type : file.type,
			size : file.size,
			filestatus : file.filestatus,
			percent : 0
		});
		Ext.data.StoreManager.lookup("fileItems").add(f);
	},
	formatFileState : function(n){//文件状态
		switch(n){
			case SWFUpload.FILE_STATUS.QUEUED  : return '已加入队列';
			break;
			case SWFUpload.FILE_STATUS.IN_PROGRESS  : return '正在上传';
			break;
			case SWFUpload.FILE_STATUS.ERROR  : return '<div style="color:red;">上传失败</div>';
			break;
			case SWFUpload.FILE_STATUS.COMPLETE  : return '上传成功';
			break;
			case SWFUpload.FILE_STATUS.CANCELLED  : return '取消上传';
			break;
			default: return n;
		}
	},
	onFileError : function(file,errorCode,msg){
		var msg="";
		window.console.log(errorCode);
		switch(errorCode){
			case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED : msg='待上传文件列表数量超限，不能选择！';
			break;
			case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT : msg='文件太大，不能选择！文件大小不能超过'+this.settings.file_size_limit/1024+'MB';
			break;
			case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE : msg='该文件大小为0，不能选择！';
			break;
			case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE : msg='该文件类型不可以上传！';
			break;
			case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED : msg="上传已经停止";
			break;
			case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:msg="所有文件已经取消！";
			break;
			default:msg="未知错误!";
			break;
		}
		Ext.Msg.show({
				title : '提示',
				msg : msg,
				width : 280,
				icon : Ext.Msg.WARNING,
				buttons :Ext.Msg.OK

		});
	},
	uploadProgress : function(file, bytesComplete, totalBytes){//处理进度条
		window.console.log("完成百分比"+file.percentUploaded+"，当前速度"+file.currentSpeed/8/1024/1024+"MB/s");
		window.console.log(SWFUpload.speed.formatBytes(bytesComplete));
       	var ds = Ext.data.StoreManager.lookup("fileItems");
		for(var i=0;i<ds.getCount();i++){
			var record =ds.getAt(i);
			if(record.get('id')==file.id){
				record.set('percent', file.percentUploaded);
				record.set('filestatus', file.filestatus);
				record.commit();
			}
		}
		//更新进度条
		var pb=Ext.getCmp("progressBar");
		pb.updateProgress(file.percentUploaded/100,SWFUpload.speed.formatPercent(file.percentUploaded),true);
		//更新当前速度
		var speed=Ext.getCmp("currentSpeed");
		var speedNum=Math.ceil(file.averageSpeed/8/1024);
		window.console.log(Math.ceil(2.8));
		var unit=speedNum/1024<0?"KB/s":"MB/s";
		var speedValue=speedNum/1024<0?speedNum:speedNum/1024;
		speedValue=Math.ceil(speedValue);
		speed.setText("平均速度:"+speedValue+unit);
		//更新剩余时间
		var timeRemaining=Ext.getCmp("timeRemaining");
		timeRemaining.setText("估计剩余时间:"+SWFUpload.speed.formatTime(file.timeRemaining));

	},
	uploadComplete:function(file){
		var store = Ext.data.StoreManager.lookup("fileItems");
		model=store.getById(file.id);
		model.set("filestatus",file.filestatus);
		model.commit();
		window.console.log(this.customSettings.scope_handler.continuous);
		var stats=this.getStats();
		var label=Ext.getCmp("queue_id");
		label.setText(label.text="队列中文件个数:"+stats.files_queued);
		return this.customSettings.scope_handler.continuous;
	}
});

#8

大神们这样的问题你们解决了吗？我也遇到了这样的问题。求解决方案

#1