文件上傳字段Ext.form.field.File(擴展Text)

<div id="uploadForm" class="w_320">
    <h2>文件上傳字段</h2>
</div>

Ext.onReady(function(){
    //Ext表單
    
    //Ext.form.Basic 基本表單組件二(拾取器字段Picker)
    //開發中使用表單面板組件Ext.form.Panel,它本質是一個標準的(面板)Ext.panel.Panel,它內置並自動建立了Ext.form.Basic基本表單組件
    //與原始表單主要3點不一樣(1.提交方式 2.表單驗證 3.表單組件)
    //1.提交方式(同步---異步)
    //2.表單驗證(須要手動驗證----配置便可使用)
    //3.表單組件(基本的組件------擴展的功能強大的組件)
    
    //Picker抽象類,具備惟一的觸發按鈕用於在字段下方動態彈出面板
    //拾取器組件如：(1.ComboBox,2.Date,3.Time)
    
    //初始化信息提示功能
    Ext.QuickTips.init();
    
    //文件上傳字段Ext.form.field.File(擴展Text)
    var uploadForm = Ext.create("Ext.form.Panel",{
        title : 'Ext.form.field.File示例',
        width : 300,
        height : 100,
        renderTo : 'uploadForm',
        farme : true,
        bodyStyle : 'padding:5px',
        defaults : {//統一設置字段屬性
            width : 150,
            labelWidth : 50,
            labelSeparator : ': ',
            labelAlign : 'left',
            allowBlank : false,//不容許爲空
            msgTarget : 'side'//在字段的右邊顯示提示信息
        },
        items : [{
            name : 'myPhoto',
            fieldLabel : '照片',
            xtype : 'filefield',
            anchor : '100%',
            buttonText : '選擇照片...'
        }],
        buttons : [{
            text : '上傳文件',
            handler : uploadMyFile
        }]
        
    });
    
    //上傳文件回調函數
    function uploadMyFile(){
        var form = uploadForm.getForm();
        if(form.isValid()){
            form.submit({
                url : '../upload.jsp',
                waitMsg : '正在上傳照片文件請稍後...',
                success : function(fp,o){
                    console.info(o);
                    if(o.result.success){
                        Ext.Msg.alert('提示信息','你的照片文件"'+o.result.file+'"已經上傳成功');
                    }else {
                        Ext.Msg.alert('上傳失敗!');
                    }
                }
            });
        }
    }
    
});

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.FileItem" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%
    DiskFileUpload upload = new DiskFileUpload();
    upload.setHeaderEncoding("utf8");
    List items = upload.parseRequest(request);
    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);
%>

    1.HTML文件   2.JS文件  3. JSP文件