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);
%>