layui上传功能在before之前做逻辑处理并终止上传

怎么才能做到在layui的上传功能判断逻辑终止上传呢?查了好久才处理明白,如下图:
在这里插入图片描述
在这里插入图片描述

我想要在上传文件之前判断这个资源属性属于哪种,如果不是正确的资源属性那么就终止上传。
首先想到的是在before中做处理,后来查laui文档是在choose种做处理,兜了一圈踩了几个坑又回到before中处理,伤啊~

第一步:
首先before终止上传按理来说直接return false 就可以了,但是直接写并不管用,还是会去上传,查了一下很多人都说改源码:
找upload.js文件到下列代码:

y = function() {
           if ("choose" !== t && !l.auto || (l.choose && l.choose(g), "choose" !== t)) return l.before && l.before(g),
            a.ie ? a.ie > 9 ? u() : c() : void u()
        };

用下列代码替换大括号中的代码:

return "choose" === t ? l.choose && l.choose(g) : ((l.before && l.before(g)) === false ? '' : a.ie ? a.ie > 9 ? u() : c() : void u())

做完这一步就可以在before中终止上传了,是不是很简单呢,就是不知道会不会影响一个按钮的自动上传,不过一般项目用不到自动上传,如果有人试试可以告诉一下小老弟,这里没时间去写了,怕是我回头会忘记。

第二步:
做完第一步就可以在before中写逻辑了,这一步说难也不算难,直接上代码:

upload.render({
            url: '/admin/Base/upload',
            elem: '#fileSelector_file',
            accept: 'file',
            // accept: 'video|audio|images',
            exts:"jpg|jpeg|mp4|png|pdf",
            // acceptMime: 'file',
            bindAction: '#fileUpload_file',
            auto: false,
            before: function (obj) {
            	var files = this.files = obj.pushFile(); // layui文档标注这是一个文件队列,(每次选定文件都会往其中添加)
            	var fileName;
            	var i = 0;
            	var j = 0;
                for(var key in files){
                	i++;
            		fileName = files[key].name; //针对一个文件直接赋值就可以了
            	}
                //判断队列每次只保存最后一个文件
            	if(i>1){
            		for(var key in files){
            			j++;
            			if(i == j){
            			    fileName = files[key].name;
            			}else{
            			    delete files[key]; //删除队列中的文件
            			}
                    }
            	}
                var ext = fileName.substr(fileName.lastIndexOf('.') + 1);//获得后缀
                var efys = type = $("#edit_filetypes option:selected").parent("optgroup").attr("class");//获取文件类型
                if(efys == 0){
                    if("jpg,jpeg,png".indexOf(ext) == -1){
                    	layer.msg("请上传图片,或更改资源类型!");
                    	return false;
                    }
                }else if(efys == 1){
                	if(ext != "mp4"){
                        layer.msg("请上传视频(mp4格式),或更改资源类型!");
                        return false;
                    }
                }else if(efys == 2){
                	if(ext != "pdf"){
                        layer.msg("请上传文档(pdf格式),或更改资源类型!");
                        return false;
                    }
                }else{
                    layer.msg("上传出错,请选择资源类型!");
                    return false;
                }
                layer.load(); //上传loading
            },
            done: function (result,index) {
            	delete this.files[index];
                layer.closeAll('loading'); //关闭loading
                
                if (result.msg == 'error') {
                    layer.msg('上传出错');
                    $('#uploadInfo').text("上传失败!").css("color","red");
                    $('#uploadInfo').show();
                } else {
                    layer.msg('上传完成');
                    $('#file_file_path').val(result.data.src);
                    $('#uploadInfo').val("上传成功!");
                    $('#uploadInfo').show();
                }
            }
        });

需要特别注意的是获取队列的方法,每次选择文件都会往队列中添加,我们是单文件上传,所以必须保证每次只有一个文件,用delete files[key]来做删除

  • 6
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 16
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值