Extjs 文件上传

最新推荐文章于 2021-02-23 12:23:01 发布

原创最新推荐文章于 2021-02-23 12:23:01 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #stylesheet #function #import #exception #html

JAVA 同时被 2 个专栏收录

42 篇文章

订阅专栏

JAVASCRIPT

22 篇文章

订阅专栏

本文介绍了一种支持多文件上传并解决中文乱码问题的方法。通过使用ExtJS库创建了一个包含文件上传字段的表单，并设置了相应的按钮及事件处理。后端采用JSP实现文件上传逻辑，利用SmartUpload组件进行文件处理。

支持多文件上传，解决中文乱码问题。

废话少说，直接贴上代码：

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>upload</title>
<link rel="stylesheet" type="text/css"
    href="jslib/ext3.0/resources/css/ext-all.css" />
<script type="text/javascript"
    src="jslib/ext3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="jslib/ext3.0/ext-all.js"></script>
<script type="text/javascript"
    src="jslib/ext3.0/src/locale/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"
    href="jslib/ext3.0/examples/form/file-upload.css" />
<script type="text/javascript"
    src="jslib/ext3.0/examples/ux/FileUploadField.js"></script>
<script type="text/javascript" src="js/Upload.js"></script>
</head>
<body>
<div id="fi-form"></div>
</body>
</html>

js代码：

Ext.onReady(function(){

    Ext.QuickTips.init();

    var msg = function(title, msg){
        Ext.Msg.show({
            title: title,
            msg: msg,
            minWidth: 200,
            modal: true,
            icon: Ext.Msg.INFO,
            buttons: Ext.Msg.OK
        });
    };

    var fp = new Ext.FormPanel({
        renderTo: 'fi-form',
        fileUpload: true,
        width: 300,
        frame: true,
        title: 'File Upload Form',
        autoHeight: true,
        bodyStyle: 'padding: 10px 10px 0 10px;',
        labelWidth: 60,
        defaults: {
            anchor: '95%',
            allowBlank: false,
            msgTarget: 'side'
        },
        items: [{
            xtype: 'fileuploadfield',
            id: 'form-file',
            autoWitdh:true,
            emptyText: '',
            fieldLabel: '上传文件',
            name: 'photo-path',
            buttonText: '',
            buttonCfg: {
                iconCls: 'upload-icon'
            }
        }],
        buttons: [{
            text: '上传',
            handler: function(){
                if(fp.getForm().isValid()){

                    fp.getForm().submit({
                        url: 'jsplib/upload.jsp',
                        waitMsg: '文件上传中，请等待',
                        success: function(fp, o){
                            o=Ext.util.JSON.decode(o);
                            msg(o.flag, o.file);
                        },
                        failue:function(){
                            alert("上传失败");
                        }
                    });
                }
            }
        },{
            text: '取消',
            handler: function(){
                fp.getForm().reset();
            }
        }]
    });
});

jsp代码:

<%@page import="org.json.JSONObject"%>
<%@page import="java.io.*"%>
<%@page import="java.util.*"%>
<%@page import="com.jspsmart.upload.*"%>
<%@page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    JSONObject result = new JSONObject();
    int count = 0;
    String fileName = "";
    SmartUpload mySmartUpload = new SmartUpload();
    try {
        mySmartUpload.initialize(config, request, response);
        mySmartUpload.upload();
        for (int i = 0; i < mySmartUpload.getFiles().getCount(); i++) {
            com.jspsmart.upload.File myfile = mySmartUpload.getFiles()
                    .getFile(i);
            fileName = myfile.getFileName();
            count = mySmartUpload.save("upfile/");
        }
        result.put("flag", true).put("file", fileName);
    } catch (Exception e) {
        result.put("flag", false).put("file", fileName);
    }
    out.write(result.toString());
%>