weixin_33695082 2015-11-23 19:04 采纳率: 0%
浏览 39

通过ajax加载图像数组

so I have an array as response when i upload images with 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"

Now i want to append this:

 <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>

as a loop to this:

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

After the complete event of dropzone, that means i would need this code here somewhere:

Dropzone.options.myGalleryDropzone = {

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

1条回答 默认 最新

  • weixin_33734785 2015-11-23 19:22
    关注

    Using only jQuery, you have a choice between building the DOM through a string or programmatically. Either way, it should be a DOM element wrapped in jQuery:

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

    Then another function to populate the element:

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

    And one more to put it together:

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

    Called at the complete, assuming the container is empty:

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

报告相同问题?

悬赏问题

  • ¥15 nslt的可用模型,或者其他可以进行推理的现有模型
  • ¥15 arduino上连sim900a实现连接mqtt服务器
  • ¥15 vncviewer7.0安装后如何正确注册License许可证,激活使用
  • ¥15 phython如何实现以下功能?查找同一用户名的消费金额合并2
  • ¥66 关于人体营养与饮食规划的线性规划模型
  • ¥15 基于深度学习的快递面单识别系统
  • ¥15 Multisim仿真设计地铁到站提醒电路
  • ¥15 怎么用一个500W电源给5台60W的电脑供电
  • ¥15 请推荐一个轻量级规则引擎,配合流程引擎使用,规则引擎负责判断出符合规则的流程引擎模板id
  • ¥15 Excel表只有年月怎么计算年龄