前言:layui中的上传,如何在点击上传按钮前阻止file的默认打开文件选择框呢?我想点击后先判断下,如果判断结果不符合,就直接弹出提示框,而不是文件选择框,判断符合才进行文件选择。
但是在layui的uplode.render里的before和choose都试了,始终避免不了。在外面也绑定了click事件,还是不行。绑定了click的return false,都不行。
<button type="button" class="layui-btn layui-btn-normal" onclick="test()">先检查再选图片的按钮</button>
<button type="button" id="idUpload">上传图片</button><!-- 这个按钮你给隐藏一下嘛 -->
<script>
layui.use('layer', function(){
var layer = layui.layer;
});
layui.use('upload', function(){
var $ = layui.jquery ,upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#idUpload'
,url: '/files' //改成您自己的上传接口
,multiple: true
,accept: 'images'
,acceptMime: 'image/jpg, image/png, image/jpeg'
,exts:'jpg|png|jpeg'
,data: {
communityid: function(){
return $("#communityid").val();
},
picpath: function(){
var citystr= $('#city').find("option:selected").text();
var townstr=$('#town').find("option:selected").text();
var communitystr=$('#communityid').find("option:selected").text();
var s = "/湘潭党群服务中心/"+citystr+"/"+townstr+"/"+communitystr+"/";
return s ;
}
}
,before: function(obj){
layer.load(); //上传loading
}
,done: function(res){
//如果上传失败
layer.closeAll('loading');
if(res.code > 0){
return layer.msg('上传失败');
}else {
layer.msg('上传成功');
example.ajax.reload();
return;
}
//上传成功
}
,error: function(){
layer.closeAll('loading');
//失败状态,并实现重传
/* var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});*/
}
});
});
function test() {
//在此做你的检查
$(‘#idUpload‘).click(); //检查通过再选上传图片
}
</script>