通过ajax加载图像数组

Question

所以当我使用 dropzone 上传图像时，我有一个数组作为响应：

{50: "/media/50/twitter cover photos for new year 2016.png", 51: "/media/51/174920-1280.png",…}

50: "/media/50/twitter cover photos for new year 2016.png"
51: "/media/51/174920-1280.png"
52: "/media/52/buy-instagram-followers.jpg"

现在我想附加这个：

 <div class="col-lg-2 col-md-4 col-xs-6 thumb">
       <img class="img-responsive" src=" // the values of the response array //" alt="">
       <div class="galleryremovebutton">
          <a href="/delete/ the keys / ids of the response array " class="btn btn-danger" role="button">Izbrisi sliku</a>
       </div>
 </div>

作为一个循环：

<div id="galleryimgs" class="row">

在 dropzone 的完整事件之后，这意味着我需要这里的代码：

Dropzone.options.myGalleryDropzone = {

            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 1, // MB
            parallelUploads: 8,
            complete: function () {
                HERE
            }
        };

Answer 1

仅使用 jQuery，您可以选择通过字符串或以编程方式构建 DOM。无论哪种方式，它都应该是一个用 jQuery 包裹的 DOM 元素：

function makeThumb() {
  // $('html_for_one_thumbnail');
  // $('<div />').append('<div />')...etc;
  return elementForThumb;
}

然后是另一个填充元素的函数：

function configureThumb($element, thumb, thumbId) {
  $element.find('img').attr('src', thumb);
  $element.find('a').attr('href', '/delete/' + thumbId);
}

还有一个把它放在一起：

function buildThumbnails($element, thumbs) {
  thumbs.forEach(function(thumb, thumbId) {
    var $thumb = makeThumb();
    $element.append($thumb);
    configureThumb($thumb, thumb, thumbId);
  });
}

完整调用，假设容器为空：

complete: function(data) {
    buildThumbnails($('#galleryimgs'), data);
}