具有多个预览和多个实例的 Uploadcare

Question

如何更改脚本以填充.seperate-group 中包含的图像的src，将A 中上传的图像与FOR A 和B 与FOR B 匹配？

var $ = uploadcare.jQuery;
var widgets = uploadcare.initialize(); // get all widget instances
widgets.forEach(function(widget) {
  widget.onUploadComplete(function(fileInfo) {
    var group = $(widget.inputElement).closest(".group"); // find a group the instance is related to
    $(group).find('.feature-img').each(function(i, img) { // find image tags in the group
      img.src = fileInfo.cdnUrl; // update previews
    });
  });
});

.image-input {
  display: block;
  position: relative;
  height: 100px;
  width: 200px;
}

.container {
  display: flex;
}

.image-preview-wrapper {
  height: 50px;
}

.feature-img {
  height: 100%;
}

.seperate-group img {
  height: 100px;
  width: 100px;
}

<div class="container">
  <div class="group">A
    <div class="image-input">
      <input type="hidden" role="uploadcare-uploader" data-clearable="" data-images-only="" data-public-key="1c86ca998ba22e75fbc6" value="">
    </div>
    <div class="image-preview-wrapper">
      <img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"></img>
      <img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"></img>
    </div>
  </div>
  <div class="group">B
    <div class="image-input">
      <input type="hidden" role="uploadcare-uploader" data-clearable="" data-images-only="" data-public-key="1c86ca998ba22e75fbc6" value="">
    </div>
    <div class="image-preview-wrapper">
      <img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"></img>
      <img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"></img>
    </div>
  </div>
  <div class="seperate-group">
    <img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png">FOR A</img>
    <img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png">FOR B</img>
  </div>
</div>
<script>
  UPLOADCARE_LOCALE = "en";
  UPLOADCARE_TABS = "file url facebook dropbox instagram";
  UPLOADCARE_PUBLIC_KEY = "7d504e167ecaef7b82d4";
</script>
<script charset="utf-8" src="//ucarecdn.com/libs/widget/3.2.2/uploadcare.full.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

Kyle，试试这个代码 sn-p

var $ = uploadcare.jQuery;
var widgets = uploadcare.initialize(); // get all widget instances
widgets.forEach(function (widget) {
  widget.onUploadComplete(function (fileInfo) {
    var group = $(widget.inputElement).parent().parent(); // find a group the instance is related to
    $(group).find('.feature-img').each(function (i, img) { // find image tags in the group
      img.src = fileInfo.cdnUrl; // update previews
    });
  });
});