实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传。今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传。

首先,我们创建一个Form,它包含一个filefield字段

然后,我们通过Form的submit方法进行提交,此时,ExtJS会自动判断,如果Form中包含filefield字段,Form的method会设置为post

最后,我们通过服务器接收form提交的数据,并返回一段json字符串

ExtJS Form代码如下:

Ext.create("Ext.form.FormPanel", {
    title: "ExtJS 无刷新文件上传",
    width: 350,
    height: 300,
    x: 30,
    y: 30,
    layout: "form",
    bodyPadding: "5",
    defaultType: "textfield",
    fieldDefaults: { labelAlign: "left", labelWidth: 55 },
    items: [
        { xtype: "filefield", name: "File", fieldLabel: "选择文件", buttonText: "浏览", allowBlank: false }
    ],
    buttons: [
        {
            text: "上传",
            handler: function () {
                var formCmp = this.up("form");
                if (!formCmp.isValid()) return;    //验证未通过,返回

                formCmp.submit({
                    url: "UploadFileReceiver",
                    method: "POST",
                    waitMsg: '正在上传...',
                    success: function (form, action) {
                        Ext.MessageBox.alert("提示", action.result.message);
                    },
                    failure: function (form, action) {
                        switch (action.failureType) {
                            case Ext.form.action.Action.CLIENT_INVALID:
                                Ext.Msg.alert('失败', 'Form fields may not be submitted with invalid values');
                                break;
                            case Ext.form.action.Action.CONNECT_FAILURE:
                                Ext.Msg.alert('失败', 'Ajax communication failed');
                                break;
                            case Ext.form.action.Action.SERVER_INVALID:
                                Ext.Msg.alert('失败', action.result.message);
                        }
                    }
                });
            }
        }
    ],
    renderTo: "container"
});

代码的生成的界面如下(查看在线示例):

实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

点击浏览按钮,选择文件,然后点击上传按钮即可。

我们服务器段的代码如下:

Response.ContentType = "text/json";

if (Request.Files.Count == 0)
{
    var result = new { success = false, message = "请选择文件" };
    var strResultContent = Json.Encode(result);
    Response.Write(strResultContent);
}
else
{
    var file = Request.Files[0];
    var result = new { success = true, message = "服务器接收到上传的文件,文件名:" + Path.GetFileName(file.FileName) };
    var strResultContent = Json.Encode(result);
    Response.Write(strResultContent);
}

首先判断,如果不包含文件,则直接返回json数据。

如果包含文件,我们获取到文件名,并返回成功的json数据。

当我们上传一个文件的时候,会看到如下信息(查看在线示例):

实用ExtJS教程100例-009:ExtJS Form无刷新文件上传

本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作。

系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录

如果认为此文对您有帮助,别忘了支持一下哦!

作者:齐飞
声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

转载:http://www.cnblogs.com/youring2/p/extjs-100-examples-form-async-upload-file.html
上一篇:【软件使用】GitHub使用教程for Eclipse


下一篇:spring boot redis分布式锁