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();
            }
        }]
    });
            
}
View Code

下面是实现上传功能的主要的后台代码。

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;
        }
View Code

在上传的时候,有时候会发现有一种问题,就是有时候连方法提交的时候,都会报错,后来经过资料查询,才发现,在.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的内容是否在正常,然后给出提示,这是后续的遇到的问题,我也记录在这里。

如果在有关方面大家有疑问,可以通过联系方式联系我。

最后,小白希望如果我的随笔给了大家一点帮助,希望大家能够赞一赞,小白花时间来总结记录这些内容也不容易,谢谢!

转载于:https://www.cnblogs.com/wangqc/p/extjsFileUpload.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好!以下是一个示例的后端接口方法,用于处理ExtJS上传.xls文件并返回上传后的文件路径: ```java import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; @RestController @RequestMapping("/api") public class FileUploadController { @PostMapping("/upload") public String uploadFile(@RequestParam("file") MultipartFile file) { try { // 检查文件类型,确保上传的是.xls文件 if (!file.getOriginalFilename().endsWith(".xls")) { return "只允许上传.xls文件"; } // 处理文件上传逻辑,保存文件到指定位置 String filePath = "/path/to/save/" + file.getOriginalFilename(); file.transferTo(new File(filePath)); return filePath; // 返回上传后的文件路径 } catch (Exception e) { e.printStackTrace(); return "上传失败"; } } } ``` 这是一个使用Spring Boot架编写的Java后端接口方法。它监听`/api/upload`路径的POST请求,并接收一个名为`file`的MultipartFile参数,该参数用于接收上传文件。在方法内部,我们可以根据需要添加一些文件类型验证、异常处理等逻辑。最后,将文件保存到指定路径,并返回上传后的文件路径。 请注意,您需要根据实际需求修改文件保存路径`/path/to/save/`为您希望保存文件的实际路径。此外,还需要根据您的项目环境进行适当的配置和调整。 希望能对您有所帮助!如果您有任何问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值