jquery實現多圖片上傳

在做后台管理的時候，遇到這樣一個需求，實現多張圖片上傳並按選中的順序顯示。PS：圖片上傳的時候是即時上傳到服務器，后台返回圖片在服務器上的地址，在最后點擊提交按鈕的時候，把地址傳給后端寫入數據庫即可。

1、input標簽，accept='image/*'上傳圖片格式只要是image就行，multiple實現文件可以多選

<input type="file" id="add-pic2" accept="image/*" multiple>

2、監聽選中事件

       $("#add-pic2").on("change", function () {
        // if (pic_banner.length >= 10 || pic_banner.length + this.files.length >= 10) {
        //   return swal("最多10張圖片");
        // }
        //遞歸上傳
        var files = this.files
        files.length && diguiAjax(this.files, 0, this.files.length, function (res, i) {
          var obj = {
            pic: res.data.list
          };
          pic_banner.push(obj);
          var bannerHtml = "";
          bannerHtml = `<div class="pic-wrap  pull-left"><span class="closeX" data-index="${res.data.list}">x</span><img src="${res.data.list}" alt=""></div>`;
          $(".banner-wrap").append(bannerHtml);
          if (i >= files.length) {
            document.getElementById('add-pic2').value = null
          }
        })
      });
      //遞歸上傳banner圖片
      function diguiAjax(files, j, length, cb) {
        var ele = files[j];
        //壓縮圖片 lrz壓縮圖片
        lrz(ele).then(function (rst) {

          $post({
            url: api_www + "/upload_img/uploadImg",
            data: {
              token: token,
              img: rst.base64,
              is: 1
            },
            callback: function (res) {
              if (res.code == 1) {
                cb(res, j)
                if (++j < length) {
                  diguiAjax(files, j, length, cb)
                }
              }
            }
          });
        })
      }

 附：如果選擇圖片先保存在本地，不上傳，點擊提交按鈕統一上傳，核心代碼如下，

imgObjPreview1是要顯示圖片的div

imgObjPreview1.src = window.URL.createObjectURL(this.files[0]);