jQuery上传预览库的多次使用

Question

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

$.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
    });
});

这里有一个小提琴：https://jsfiddle.net/von9zL1g/1/