3

私は現在、画像アップローダー（ソースファイル）を使用しています。重複するプレビューフィールドを作成するのに問題があります。プレビュー画像フォームを作成していますが、サムネイルが1つしか表示されていません。Jsに2つのサムネイルを表示させるにはどうすればよいですか？これがライブの例であり、私のソースコードの詳細な説明です

これは私が最初にやりたいことです： ここに画像の説明を入力してください

プレビュー画像フォーム（サムネイル）を作成するための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>
4

1 に答える 1

2

これを試して：

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>
于 2012-07-24T18:45:55.560 に答える