怎么才能做到在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]来做删除