js html页面:
<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="js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="js/extjs/ext-all.js"></script>
<script type="text/javascript" src="js/extjs/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"%>
<%@ page import="java.io.File"%>
<%
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);//从全路径中提取文件名
}
File newFile = new File("c:/" + fileName);
try {
item.write(newFile);
} catch (Exception e) {
e.printStackTrace();
}
}
String msg = "{success:true,file:'"+fileName+"'}";
response.getWriter().write(msg);
%>
分享到:
相关推荐
Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo
最新的ext4.0,最新的ext4.0,最新的ext4.0。
ext4.0 多文件上传
Ext4 是 Ext3 的改进版,修改了 Ext3 中部分重要的数据结构,而不仅仅像 Ext3 对 Ext2 那样,只是增加了一个日志功能而已。Ext4 可以提供更佳的性能和可靠性,还有更为丰富的功能:
Ext4.0中文版
EXT4.0项目源码
最新ext4.0帮助文档
ext4.0的中文文档,界面很优美
Ext4.0技术开发指南是针对初学者学习EXT好的帮助文档。
ext 4.0.zip
Ext 4.0开发包及源代码,能够满足Ext 4.0开发人员的需求。
Ext 4.0英文版API,喜欢的朋友可以自由下载!All For One,One For All!
ext4.0动态加载,使用json数据源,整个项目只有一个页面,js按照mvc模式搭建
Ext4.0-API,适应所有的技术人员使用,很帮的
为了帮助大家学习,我这里给是整合了ext4.0帮助文档,ext3.0,4.0中文API,欢迎大家下载学习
Ext4.0学习总结及功能详解。描述ext各种控件用法,布局等。
ext4.0的提示ext4.0.jsb2+Spket 插件 插件配置请百度
这是一篇关于Ext4.0的学习总结及功能详解(特别详细),是我从百度上下来的,并稍作修改。在此谢谢原作者。
呵呵,最新版的Ext 4.0,官网下载,留给自己,也留给大家!
Extjs 4.0 MVC分页实例