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]);