前端程序：
<HTML>
<HEAD>
<TITLE>Ext.form.field.File示例</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var uploadForm = Ext.create('Ext.form.Panel',{
title:'Ext.form.field.File示例',
bodyStyle:'padding:5 5 5 5',//表单边距
frame : true,
height:100,
width:300,
renderTo :'form',
defaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 50,//标签宽度
width : 150,//字段宽度
allowBlank : false,//是否允许为空
labelAlign : 'left',//标签对齐方式
msgTarget :'side' //在字段的右边显示一个提示信息
},
items:[{
xtype: 'filefield',
name: 'photo',
fieldLabel: '照片',
anchor: '100%',
buttonText: '选择照片...'
}],
buttons: [{
text: '上传文件',
handler: function() {
var form = uploadForm.getForm();
if(form.isValid()){
form.submit({
url: 'uploadServer.jsp',
waitMsg: '正在上传照片文件请稍候...',
success: function(fp, o) {
Ext.Msg.alert('提示信息', '您的照片文件 "' + o.result.file + '"已经成功上传。');
}
});
}
}
}]
});
});
</script>
</HEAD>
<BODY STYLE="margin: 10px">
<div id='form'></div>
</BODY>
</HTML>
JSP代码：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="org.apache.commons.fileupload.*"%>
<%@ page import="org.apache.commons.fileupload.FileItem"%>
<%
DiskFileUpload upload = new DiskFileUpload();
upload.setHeaderEncoding("utf8");
java.util.List items = upload.parseRequest(request);
java.util.ListIterator listIterator = items.listIterator();
String fileName = "";
while(listIterator.hasNext()){
FileItem item = (FileItem)listIterator.next();
if(!item.isFormField()){
fileName = item.getName();
fileName = fileName.substring(fileName.lastIndexOf("\\")+1);//从全路径中提取文件名
}
}
String msg = "{success:true,file:'"+fileName+"'}";
response.getWriter().write(msg);
%>
相关包文件：
commons-fileupload-1.2.1.jar
commons-io-1.4.jar
分享到：
相关推荐
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经...ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
ExtJS4学习笔记(十三)---上传文件(upload) ExtJS4学习笔记(十二)---选项卡(tabs) ExtJS4学习笔记(十五)---Ext.data.Model ExtJS4学习笔记(十六)---Combobox三级联动 ExtJS4学习笔记(十四)--- ComponentQuery ExtJS4...
23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) 73 27. extJs 2.0学习笔记(DomHelper.js篇) ...
NULL 博文链接：https://lucky16.iteye.com/blog/1490278
Extjs6.2 生成的admin-dashboard官方模板
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具，它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
语言程序设计资料：ExtJs学习笔记-2积分.doc
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...
exjts4 学习笔记源码，源码包含windws，hbox,vbox和Grid的应用，其中grid介绍比较多。下载解压后，部署后就可以使用，所有代码均在demo文件夹下。更多extjs4教程，请关注http://www.mhzg.net
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架，具有最新的Javascript标准支持 新的漂亮组件和主题，以创建漂亮的企业应用程序 现代工具链，用于构建优化，高性能，通用的应用程序 用于可视...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
4. **数据绑定**：阐述ExtJS的数据模型（Store）和数据显示组件（Grid、Tree）之间的数据绑定机制，包括XML、JSON数据源的加载。 5. **表单元素**：深入探讨表单（Form）的创建，包括各种表单字段（TextField、...
ExtJS 是一个强大的JavaScript应用程序框架，它提供了丰富的用户界面组件和功能，用于构建富客户端Web应用。Bootstrap 是一个流行的前端开发框架，用于快速构建响应式和移动优先的网站。"extjs-theme-bootstrap-...
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
Extjs4.0学习笔记大全.pdf，供大家学习
extjs4.0开发人员以及学习可以下载参考
ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子
在本篇《ExtJS4学习笔记十一：树控件的使用》中，我们将深入探讨ExtJS框架中的树形控件（TreePanel），这是一种强大的UI组件，用于展示层次结构的数据。ExtJS4对树控件的功能进行了增强，使其更加灵活且易于使用。...