ExtJS4学习笔记四－－图片上传
前端程序：
<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><%@ 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);%>