javascript - JS/Ajax 图片上传 - 生成相同内容的多张图片预览缩略图

Question

我目前正在使用图像上传器（源文件）。我在创建重复的预览字段时遇到了困难。我正在创建预览图像表单，但它只显示一个缩略图。我怎样才能让 Js 给我两个缩略图？这是一个活生生的例子和对我的源代码的进一步解释

这是我最初想要做的：

用于创建预览图像表单的 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

尝试这个：

将 uploaderpreviewer.js 上的函数“displayImage”替换为：

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>