文件上传字段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文件