JS / Ajax图像上传 - 生成相同内容的多个图像预览缩略图

Question

我目前正在使用图片上传器（Source Files）。我在创建重复的预览字段时遇到了困难。我正在创建预览图像表单，但它只显示一个缩略图。我如何让Js给我两个缩略图？这是LIVE EXAMPLE并对我的源代码进一步说明

这是我最初想做的事情：

用于创建预览图像表单（缩略图）的JS片段

upLoaderPreviewer.js

<script>
function createImageForm(index) {

    var form = '';

    form += '<div><table cellspacing="0">';
    form += '<tr><td class="label">'
          + '<label for="imageToUpload' + index + '">'
          + $.uploaderPreviewer.messages.imageLabel + ' ' + index + ':</label></td>';
    form += '<td class="removeImageButton">'
          + '</td>';
    form += '<td class="imageFormFileField">'
          // BUG: If the "enctype" attribute is assigned with jQuery, IE crashes
          + '<form enctype="multipart/form-data">'
          + '<input id="imageToUpload' + index + '" type="file" />'
          + '<input type="hidden" name="currentUploadedFilename"'
          + ' class="currentUploadedFilename"  /></form>'
          + '</td></tr>';
    form += '<tr><td></td><td></td><td>'
          + '<div class="previewImage" style="float:left; margin:10px 10px 10px 0;  "><img /></div>'
          + '<button type="button" class="small removeImage"></td></td></tr></table></div>';


    return form;
};
</script>

Answer 1

试试这个：

替换功能＆＃39; displayImage＆＃39;在uploaderpreviewer.js上用这个：

function displayImage($previewDiv, imageUrl) {
//New
var yourCustomPreview = $('#custompreview');

var imageFilename = imageUrl.substr(imageUrl.lastIndexOf('/') + 1);

$previewDiv
    .removeClass('loading')
    .addClass('imageLoaded')
    .find('img')
    .attr('src', imageUrl)
    .show();
$previewDiv
    .parents('table:first')
    .find('input:hidden.currentUploadedFilename')
    .val(imageFilename)
    .addClass('imageLoaded');
$previewDiv
    .parents('table:first')
    .find('button.removeImage')
    .show();

    //New
    yourCustomPreview.prepend('<img src="' + imageUrl + '"/>');

}

并将其添加到您要复制拇指的位置：

<div id="custompreview">
</div>