extjs實現簡單的多文件上傳（不借助任何插件）,以及包含處理上傳大文件的錯誤的各種處理辦法

在extjs的學習過程中，有遇到過有關多文件上傳的問題，但是網上的大多數都是專門的去實現多文件上傳而去做的組件之類的，沒有特別簡單的方式，於是小白便做了下面的內容，只是通過動態的去添加extjs的自帶的組件 filefield，然后有幾個需要上傳的文件，就動態添加幾個這樣的組件，從而實現簡單的多文件上傳。希望能給想做多文件上傳，又不想借助別人封裝好的組件或者flash來實現該功能的朋友們一點幫助。下面是效果圖。

下面是有關的前台代碼

//動態添加File組件的的函數
function addFileUp() {
    var fileField = new Ext.form.File({
        name:"newFiles",
        width:440,  
        emptyText: '請選擇文件',
        fieldLabel: '附件',
        buttonText: '選擇文件', 
        allowBlank: false 
    })
    newFieldsCount++;
    if(newFieldsCount>=2)
    {
        Ext.getCmp("addONotice").setAutoScroll(true);
    }
    return fileField;
};
//添加公告（）
function AddONotice() {
    var form = new Ext.form.Panel({
        id:"addONotice",
        border: false,
        fileUpload: true,
        fieldDefaults: {
            labelWidth: 70,
            labelAlign:'right',
            labelStyle:'padding-right:10px'
        },
        layout:'column',
        bodyPadding: 10,
            items: [{
            style:'margin-top:6px',
            xtype: 'textfield',
            fieldLabel: '標題',
            name: 'Title',
            width:440,
            allowBlank:false,
            nanText:'輸入格式錯誤',  
        },
        {
            style:'margin-top:6px',
            xtype: 'combobox',
            store:ToDeptTypeStore,
            queryMode: 'remote',
            editable:false,
            displayField: 'title',
            valueField: 'id',
            fieldLabel: '目標類型',
            emptyText: "請選擇目標類型",
            allowBlank:false,
            name: 'ToDeptType',
            width:220,
        },
        {
            style:'margin-top:6px',
            xtype: 'combobox',
            store:deptStore,
            queryMode: 'remote',
            editable:false,
            displayField: 'title',
            valueField: 'id',
            fieldLabel: '接收部門',
            emptyText: "請選擇接收部門",
            allowBlank:false,
            name: 'ToDeptID',
            width:220,
        },{
            style:'margin-top:6px',
            xtype: 'textarea',
            fieldLabel: "內容",
            name: 'Detail',
            width:440
        },{
            style:'margin-top:6px',
            xtype: 'textarea',
            fieldLabel: "備注",
            name: 'MemoInfo',
            width:440
        },{  
           xtype: 'filefield',  
           name: 'photo',  
           fieldLabel: '附件',  
           msgTarget: 'side',  
           allowBlank: false,  
           width:440,  
           emptyText: '請選擇文件',
           buttonText: '選擇文件'
        }
        ],  
        buttons: [{ text: '添加附件',  
            handler: function() {  
                form.add(addFileUp());
            }  
        }, {text: '清空附件',  
            handler: function() {  
                form.items.each(function(item,index,length){ 
                    if(item.getName()=="newFiles")
                    {
                        this.destroy();
                    }
                });
                form.body.dom.scrollTop = 0;
                form.setAutoScroll(false);
                newFieldsCount = 0;
            }  
        }, {text: '刪除附件',  
            handler: function() {  
                var maxItemsLength = form.items.length-1;
                if(form.items.items[maxItemsLength].getName()=="newFiles")
                {
                    form.items.items[maxItemsLength].destroy();
                    newFieldsCount--;
                    form.body.dom.scrollTop = 0;
                }
                if(newFieldsCount<2)
                {
                    form.setAutoScroll(false);
                }
            }  
        }]
    });
    var window = new Ext.window.Window({
        modal: true,//蒙版
        autoShow: true,
        title: '添加公告',
        width: 490,
        height:420,
        minWidth: 300,
        minHeight: 200,
        layout: 'fit',
        items: form,
        buttons: [{
            text: '確認',
            handler: function () {
                if (!Ext.getCmp("addONotice").getForm().isValid()) {
                    Ext.MessageBox.alert("提示", "請填寫完整信息在提交！");
                    return false;
                }
                form.getForm().submit({
                    url:path+"ONotice/AddONotice",
                    waitMsg:"添加中....",
                    params: { "uid":uid },
                    success:function(form,action){
                        var res = action.result;
                        if(res.success == 1){
                            Ext.MessageBox.alert("提示框", res.msg);
                            Ext.getCmp("ONoticeGrid").store.reload();
                            window.close();
                            return;
                        }else{
                            Ext.Msg.alert('提示',res.msg);
                            return;
                        }
                    },
                    failure:function(form,action){
                        Ext.MessageBox.alert("提示框", "添加失敗!");
                    }
                }); 
            }
        },{
            text: '取消',
            handler: function () {
                window.close();
            }
        }]
    });
            
}

下面是實現上傳功能的主要的后台代碼。

public bool fileLoad()
        {
            HttpFileCollection files = HttpContext.Current.Request.Files;
            /// '狀態信息
            System.Text.StringBuilder strMsg = new System.Text.StringBuilder();
            for (int iFile = 0; iFile < files.Count; iFile++)
            {
                ///'檢查文件擴展名字
                bool fileOK = false;
                HttpPostedFile postedFile = files[iFile];
                string fileName, fileExtension;
                fileName = System.IO.Path.GetFileName(postedFile.FileName);
                if (fileName != "")
                {
                    fileExtension = System.IO.Path.GetExtension(fileName);
                    String[] allowedExtensions = { ".doc", ".xls", ".rar", ".zip", ".wps", ".txt", "docx", "pdf", "xls" };
                    for (int i = 0; i < allowedExtensions.Length; i++)
                    {
                        if (fileExtension == allowedExtensions[i])
                        {
                            fileOK = true;
                            break;
                        }

                    }
                    if (!fileOK) return false;
                }
                if (fileOK)
                {
                    postedFile.SaveAs(System.Web.HttpContext.Current.Request.MapPath("~/oNoticeFiles/") + fileName);
                }
            }
            return true;
        }

在上傳的時候，有時候會發現有一種問題，就是有時候連方法提交的時候，都會報錯，后來經過資料查詢，才發現，在.net 中 ，當request 包含的信息大於2M,就不允許提交這個請求了，就會照成Js錯誤，解決方法是在web.config 的配置文件中添加 一個配置文件 在<system.web>標簽中添加<httpRuntime maxRequestLength="2097151" executionTimeout="3600"/>   意思是requerst請求可以在2g范圍內。

當然，雖然可以通過配置上面的配置方式,還不能夠保證上傳的文件的大小，仍然有可能會出現超過規定內容的情況，一旦超過了這個規定大小,將會照成請求的abroted斷開問題,經過很長一段時間跟我的前輩Bom wu的指定,我明白任何的submit都是ajax，然而,讓我驚奇的是當斷開連接的時候，他不進success跟failure(可能是因為我的框架使用了mvc),我在這里還不能確定你能否進入自身的回調函數的接口,但是如果你能夠進入success,那么，你可以通過判斷action來判斷是否正常,然后返回提醒,如果不能夠正常的進入回調函數，那么就可以通過ext.ajax.on("requestComplete",function(){});來監聽到請求的結束,然后判斷response的內容是否在正常,然后給出提示，這是后續的遇到的問題，我也記錄在這里。

如果在有關方面大家有疑問，可以通過聯系方式聯系我。

最后，小白希望如果我的隨筆給了大家一點幫助，希望大家能夠贊一贊，小白花時間來總結記錄這些內容也不容易，謝謝！