jQueryアップロードプレビューライブラリの複数使用

Question

現時点では、画像プレビュー用にこのライブラリを使用しています：jQuery Upload Preview。プレビューを複製せずに1ページで複数回使用することはできますか？ここで

$.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/