javascript - jQuery Upload Preview 库的多次使用

Question

此时，我正在使用这个库进行图像预览:jQuery Upload Preview 。是否可以在一页上多次使用它而不重复预览？

$.uploadPreview({
    input_field: ".image-upload",
    preview_box: ".image-preview",
    label_field: ".image-label"
});

$("#addNew").click(function(e) {
    e.preventDefault();
  $("body").append( '<div class="image-preview"><label for="image-upload" class="image-label">Choose file</label><input type="file" name="thumbnail[]" accept="image/*" class="image-upload" /></div>' );
});

这里是演示 JSFiddle
或者也许有人有更好的选择？
我需要像这样动态地多次使用它，并且可以预加载图像。

Answer 1

看起来你需要给每个元素一个唯一的 id，并在将每个元素插入 DOM 后调用插件。

这是一种笨拙的方法:

var id = 1;

$("#addNew").click(function(e) {
  e.preventDefault();
  $("body").append( '<div id="image-preview-'+id+'" class="image-preview"><label id="image-label-'+id+'" for="image-upload-'+id+'" class="image-label">Choose file</label><input type="file" id="image-upload-'+id+'" name="thumbnail[]" accept="image/*" class="image-upload" /></div>' );

  $.uploadPreview({
    input_field: "#image-upload-" + id,
    preview_box: "#image-preview-" + id,
    label_field: "#image-label-" + id
    });
});

这是一个 fiddle :https://jsfiddle.net/von9zL1g/1/