ExtJS4学习笔记四--图片上传

相关包文件: 
commons-fileupload-1.2.1.jar 
commons-io-1.4.jar

前端程序: 

Html代码   收藏代码
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>Ext.form.field.File示例TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js">script>  
  7.   <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js">script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         Ext.QuickTips.init();  
  11.         var uploadForm = Ext.create('Ext.form.Panel',{  
  12.             title:'Ext.form.field.File示例',  
  13.             bodyStyle:'padding:5 5 5 5',//表单边距  
  14.             frame : true,  
  15.             height:100,  
  16.             width:300,  
  17.             renderTo :'form',  
  18.             defaults:{//统一设置表单字段默认属性  
  19.                 labelSeparator :':',//分隔符  
  20.                 labelWidth : 50,//标签宽度  
  21.                 width : 150,//字段宽度  
  22.                 allowBlank : false,//是否允许为空  
  23.                 labelAlign : 'left',//标签对齐方式  
  24.                 msgTarget :'side'   //在字段的右边显示一个提示信息  
  25.             },  
  26.             items:[{  
  27.                 xtype: 'filefield',  
  28.                 name: 'photo',  
  29.                 fieldLabel: '照片',  
  30.                 anchor: '100%',  
  31.                 buttonText: '选择照片...'  
  32.             }],  
  33.             buttons: [{  
  34.                 text: '上传文件',  
  35.                 handler: function() {  
  36.                     var form = uploadForm.getForm();  
  37.                     if(form.isValid()){  
  38.                         form.submit({  
  39.                             url: 'uploadServer.jsp',  
  40.                             waitMsg: '正在上传照片文件请稍候...',  
  41.                             success: function(fp, o) {  
  42.                                 Ext.Msg.alert('提示信息', '您的照片文件 "' + o.result.file + '"已经成功上传。');  
  43.                             }  
  44.                         });  
  45.                     }  
  46.                 }  
  47.             }]  
  48.         });  
  49.     });  
  50.   script>  
  51.  HEAD>  
  52.  <BODY STYLE="margin: 10px">  
  53.      <div id='form'>div>  
  54.  BODY>  
  55. HTML>  

JSP代码: 
Jsp代码   收藏代码
  1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
  2. <%@ page import="org.apache.commons.fileupload.*"%>  
  3. <%@ page import="org.apache.commons.fileupload.FileItem"%>  
  4. <%  
  5. DiskFileUpload upload = new DiskFileUpload();  
  6. upload.setHeaderEncoding("utf8");  
  7. java.util.List items = upload.parseRequest(request);  
  8. java.util.ListIterator listIterator = items.listIterator();  
  9. String fileName = "";  
  10. while(listIterator.hasNext()){  
  11.     FileItem item = (FileItem)listIterator.next();  
  12.     if(!item.isFormField()){  
  13.         fileName = item.getName();  
  14.         fileName = fileName.substring(fileName.lastIndexOf("\\")+1);//从全路径中提取文件名  
  15.     }  
  16. }  
  17. String msg = "{success:true,file:'"+fileName+"'}";  
  18. response.getWriter().write(msg);  
  19. %>  

你可能感兴趣的:(EXT4)