layui+django多图上传限制每张图片大小

layui的多图上传挺不错的 但是官方demo方法中限制文件大小的参数是限制所有图片总和大小，不能限制单图大小

现解决这个问题 同时该方案还解决了多图上传预览、csrf_token验证 、预览图片删除等问题

前端

依赖包

<link rel="stylesheet" href="/static/layui/css/layui.css">

<script src="/static/layui/layui.js"></script>

<script src="/static/js/jquery-1.8.2.min.js"></script>  //除layui之外包

 

前端代码

{% csrf_token %}

<div>

    <button type="button" class="layui-btn layui-btn-lg" id="test1">

        <i class="layui-icon">&#xe67c;</i>选择图片

      </button>

      <div class="layui-row" style="width:1500px;">

        <div class="layui-upload-list"></div>

    </div>

        <input type="text" name="provename" id="provename" value={{text}} hidden=True  readonly="readonly">

        <input type="submit"  id ="abc" class="layui-btn layui-btn-radius layui-btn-normal" style="font-size: 25px;" value=上传图片>

</div>

 

<script>

    layui.use(['upload', 'jquery','layer'], function(){

      var upload = layui.upload;

          var $ = layui.jquery;

          var layer = layui.layer;             //layui弹出层

          //执行实例

          var uploadInst = upload.render({

              elem: '#test1', //绑定元素

              multiple: true,

              method: 'POST',

              auto: false,

              data: {

                    'csrfmiddlewaretoken': function () {        //csrf_token验证

                        return $(':input:first').val()

                    },

                    provename: function(){

                        return $('#provename').val();  //传入后台额为动态参数

                    }

                },

              acceptMime: 'image/*',

              bindAction: "#abc",//绑定上传

              url: "/provee/", //上传接口

              choose: function (obj) { //obj参数包含的信息，跟 choose回调完全一致

                  //将每次选择的文件追加到文件队列

                  files = obj.pushFile();

                  obj.preview(function (index, file, result) {

                      $(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="双击删除该图片" style="width:252px;height:348px;">')

                      if(file.size >1024*500){                 //判断上传每个图片大小

                        delete files[index];                     //过大删除指定图片

                        $('#remove_' + index).remove();   //展示容器移除

                        layer.msg('文件大小不得超过500KB', {icon: 5});  //layui弹出层

                      }

                      $('#remove_' + index).bind('dblclick', function () {//双击删除指定预上传图片

                          delete files[index];//删除指定图片

                          $(this).remove();

                      })

                  })

              },

              done: function (res) {   //回调

                  if (res.code==0) {   //上传成功后操作

                      layer.msg("图片上传成功！", { icon: 1, time: 1000 }, //弹出层

                      //清空文件列表

                      function (){

                        for (let x in files) {

                            delete files[x];

                        }

                        $(".layui-upload-list").html(""); //清空div

                    });

                    if(res.msg=="null"){    //其余操作

                        window.location.href="{% url 'successful' %}"

                    }

                    if(res.msg!="null"){        //其余操作

                        $("#provename").attr("value",res.msg); //赋值input value

                        $("#provena").html(res.msg);  //赋值div

                    }

                  }

                  //上传完毕回调

              },

              error: function () {

                  //请求异常回调

              }

          });

    });

    </script>