文件上传在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"

});

代码的生成的界面如下

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

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

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数据。

当我们上传一个文件的时候，会看到如下信息