layui多图上传_layui图片上传限制5张

《layui多图上传_layui图片上传限制5张》

在使用layui进行多图上传时，如果需要限制图片数量为5张，可以通过对layui的upload模块进行相应的配置和自定义逻辑来实现。下面将解决方案。

一、直接利用before回调函数限制

我们可以利用layui upload模块的before回调函数，在图片上传之前进行判断。代码如下：

html
</p>



    
    <title></title>
    


<button type="button" class="layui-btn" id="test1">多图上传</button>

<div id="demoText"></div>


layui.use('upload', function(){
  var upload = layui.upload;

  //多图上传示例
  var demoListView = $('#demoList')
  ,uploadListIns = upload.render({
    elem: '#test1'
    ,url: '/upload/' //改成你自己的上传接口
    ,accept: 'images'
    ,multiple: true
    ,before: function(obj){
        //限制总数不超过5张
        if(demoListView.children().length >= 5){
            layer.msg('最多只能上传5张图片');
            return false;
        }
    }
    ,done: function(res){
      //上传完毕
      console.log(res);
      //假设返回的res有src属性为图片路径
      demoListView.append('<img src="'+ res.src +'" alt="'+ res.filename +'">')
    }
    ,allDone: function(obj){ //当文件全部被提交后，才触发
        layer.msg('所有文件都已上传成功');
    }
  });
});




<p>

在这个代码中，通过before回调函数判断当前已经上传成功的图片个数（即demoListView.children().length），如果大于等于5就提示用户并且阻止继续上传。

二、利用choose事件控制选择的文件数量

```html

layui.use('upload', function(){
var upload = layui.upload;

//多图上传示例
var demoListView = $('#demoList')
,uploadInst = upload.render({
elem: '#test1'
,url: '/upload/' //改成你自己的上传接口
,accept: 'images'
,multiple: true
,choose: function(obj){
var files = obj.pushFile();
//限制总文件数不能超过5个
if(files.length + demoListView.children().length > 5){
layer.msg('最多只能选择5张图片');
return false;
}
}
,done: function(res){
//上传完毕
console.log(res);
demoListView.append(' layui多图上传_layui图片上传限制5张 ')
}
,allDone: function(obj){ //当文件全部被提交后，才触发
layer.msg('所有文件都已上传成功');
}
});
});