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
分享到:
相关推荐
NULL 博文链接:https://zxf-noimp.iteye.com/blog/634692
ExtJS验证文件上传类型,详细讲述ExtJS如何验证文件上传文件的类型!
Extjs 批量上传图片,选择多个图片可批量删除操作,
对应的描述看本人博文《ExtJS4 上传文件类型和大小的判断方法(实例) 》:http://blog.csdn.net/biboheart/article/details/10579175 在这里不具体描述了。看题也大概可以知道这些代码实现了什么应用。
介绍了两种Extjs formpanel加载数据的方式,有需要的朋友可以参考一下
Extjs 文件上传 strut2
extjs formpanel学习,秘诀,笔记
Extjs4文件上传,后台struts2
extjs的java版本的上传文件进度条
Extjs图片上传,更多资料请见我的资源:Extjs3.1.1官方实例Asp.net版http://download.csdn.net/source/2709967
批量上传文件,完整的列子,部署既可以使用,
最近给公司做网站,采用滴sturt2 extjs fckeditor完成滴,由于是和一个同事一起完成滴所有我做了4个模块,但是技术基本都用了,
extjs 多文件上传extjs 多文件上传
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
解决了应用ExtJS进行界面开发时, 文本框后带单位的问题
ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...
EXTjs批量上传下载功能
支持 自由添加和减少上传文件个数的Extjs多文件上传源代码,10分绝对值得,要注意的一点就是jsp里面引用的Ext的js和css要是2.2版本的
ExtJs中表单formPanel的横向布局
ExtJs源码上传和下载,分享给大家ext-3.3.1