ExtJS FormPanel下传 _JavaScript

ExtJS FormPanel上传

ExtJS上传组件中FormPanel能很方便的实现上传。再项目中对单个文件上传实践起来比较的简单

下面是我用这个控件的部分提起出来的部分代码：

<%@ page language="java" import="java.util.*" 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">
<html>
  <head>
    <base href="<%=basePath%>">    
    <title>文件上传</title>
	<link rel="stylesheet" type="text/css" href="./upload/extjs/resources/css/ext-all.css">
	<link rel="stylesheet" type="text/css" href="./upload/extjs/UploadDialog/css/Ext.ux.UploadDialog.css">		
	<script type="text/javascript" src="./upload/extjs/ext-base.js"></script>
	<script type="text/javascript" src="./upload/extjs/ext-all.js"></script>
	<script type="text/javascript" src="./upload/extjs/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="./upload/extjs/UploadDialog/UploadDialog.js"></script>
  </head>
  
 
  <body>
  	<script type="text/javascript">
  	
  	var uploadForm = new Ext.form.FormPanel({
	  			id:'upload_form',
				labelAlign:'right',
				frame:true,
				height:100,
				width:380,
				fileUpload:true,
				items:[{
					id:'fileUploadPath',
					xtype:'textfield',
					width:260,
					height:20,
					fieldLabel:'上传文件',
					name:'files', //长传文件名称
					inputType:'file'
				}],
				buttons:[{
					text:'导入',
					handler:function(){
						var path = Ext.getCmp('fileUploadPath').getValue();
						//path = './json/upload_filesUpload.action?files=' + path;
						//path = path.replace(/\\/g,'$');
						if(uploadForm.getForm().isValid()){
							//uploadForm.getForm().url = path;
							uploadForm.getForm().url = './json/upload_filesUpload.action';
							uploadForm.getForm().submit({
								waitMsg: '请稍等...',
								//ajax请求
								success:function(){
									/*
									var conn = new Ext.data.Connection();
									conn.request({// 发送异步请求
										url : './Food/foodSchool_importReport.action',
										method : 'POST',//注意大写
										params : {
											'path' : path
										},
										success : function(rsp, opt) {
										//导入成功后，利用AJAX执行另一个方法读取excel文件，并显示到页面上
										//......
										},
										failure : function(rsp, opt) {
											Ext.Msg.alert('异常', '导入失败，请重新选择Excel文件!');
										}
									});
									win2.hide();
									*/
									Ext.Msg.alert('提示','上传成功！ ');
									win2.hide();
								},
								failure:function(){
									Ext.Msg.alert('提示','导入失败！');
								}
							});
						}
					}
				}]
			});
			
			var btn2 = new Ext.Button({
				text:'按钮形式导入',
				handler:function(){
					win2 = new Ext.Window({
						id:'uploadFile2',
						title:'选择导入的文件',
						modal:true,
						width:400,
						height:150,
						closeAction:'hide',
						layout:'fit',
						resizable:false,
						items:uploadForm 
					});
					win2.show();
				}
			});
  	
  		Ext.onReady(function() { 			
			var viewport = new Ext.Viewport({
				//layout : 'border',
				split : true,
				items:[btn2]
			});
  		})
  	</script>
  </body>
</html>

后台代码的时间请参照我之前写的一片文章，那里有详细的说明。

http://lizhenbin2010.iteye.com/blog/1136611