在做後臺管理的時候，遇到這樣一個需求，實現多張圖片上傳並按選中的順序顯示。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)
                }
              }
            }
          });
        })
      }