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

巴特西

jquery实现多图片上传

最新文章

热门文章