ExtJS FormPanel下传
日期：2014-05-16 浏览次数：20479 次
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
??
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
