文件上传字段Ext.form.field.File(扩展Text)

最新推荐文章于 2024-07-29 17:49:33 发布

转载最新推荐文章于 2024-07-29 17:49:33 发布 · 659 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1773772/blog/612949

文章标签：

#java #python

本文介绍如何使用ExtJS框架中的Ext.form.field.File组件实现文件上传功能。通过具体实例展示了文件上传面板的创建过程，包括配置文件上传按钮、定义上传处理函数及与服务器交互等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<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文件

转载于:https://my.oschina.net/u/1773772/blog/612949