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>