Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

jq 上传多张图片到七牛云怎么做呢?我现在只能一张一张传

var token = null;
var afile = $('.upInput')[0].files[0];
var key = new Date().getTime();
$.ajax({
  type: 'post',
  url: 'xxxxx',
  dataType: 'json',
  async: false,
  data: {},
  success: function (res) {
    console.log(res);
    token = res.resultObject.token;
    var putExtra = {
      fname: '',
      params: {},
      mimeType: [] || null,
    };
    var config = {
      useCdnDomain: true,
      disableStatisticsReport: false,
      retryCount: 6,
      region: qiniu.region.z2,
    };
    var observable = qiniu.upload(afile, key, token, putExtra, config);
    var observer = {
      next(res) {
        if (res.total.percent == 100) {
          // alert("图片上传成功!")
        }
      },
      error(err) {},
      complete(res) {
        console.log(res);
        imgpash = ['http://image.ybk008.com/' + res.key];
        for (let i = 0; i < imgpash.length; i++) {
          console.log(imgpash[i]);
          lrz(imgpash[i], { width: 1000, quality: 1 })
            .then(function (rst) {
              var ranNub = parseInt(Math.random() * 10000000);
              var load = 0;
              var newli =
                '<li id="' +
                ranNub +
                '"><div class="upImg-list-box up-progress"><div class="am-progress am-progress-striped am-progress-xs"><div class="am-progress-bar" ></div></div></div></li>';
              $('.upImg-lighthouse').before(newli);
              var newimg =
                '<div class="upImg-list-box am-gallery-item"><a class="am-icon-close delImg Js-delImg" savepath="" savename="" href="javascript:void(0);"></a><a class="showurl" href="' +
                imgpash[i] +
                '"><img src="' +
                imgpash[i] +
                '"><input type="hidden" name="pic[]" value="' +
                imgpash[i] +
                '" /></a></div>';
              $('#' + ranNub).html(newimg);
              picSizeEd += 1;
              $('.picCount').html(picSizeEd);
              return rst;
            })
            .catch(function (err) {
              // 万一出错了,这里可以捕捉到错误信息
              // 而且以上的then都不会执行
              alert(err);
            })
            .always(function () {
              // 不管是成功失败,这里都会执行
            });
        }
      },
    };
    var subscription = observable.subscribe(observer); // 上传开始
  },
});

我现在可以一张一张的传,多张图片上传只展示一张

怎么才能实现多张一起上传呢


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

你就只选择了一张图片去上传

var afile = $('.upInput')[0].files[0];

var observable = qiniu.upload(afile, key, token, putExtra, config);

你这里应该判断一下 files 里面有几个,然后循环去upload。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...