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"
});

代碼的生成的界面以下（查看在線示例）：

 

點擊瀏覽按鈕，選擇文件，而後點擊上傳按鈕便可。

咱們服務器段的代碼以下：

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數據。