4

このSITEの Ajax imageuploader を使用しています。現在、プレビュー画像の複製を作成しています。1 つは入力フィールドの下に表示され、もう 1 つは「これはあなたが選択したもの」のようなページの別の場所に表示されます。問題は、ユーザーがファイルを選択すると、関数は画像を表示しますが、ユーザーが気が変わって新しい画像を選択するyourCustomPreviewと、選択された新しい画像と古い画像が表示されることです。

古いプレビュー画像を表示せずに最新のプレビュー画像を表示する方法はありますか? 不明な場合は、ソース ファイルを確認してください。

uploaderPreviewer.js- オリジナル関数

<script>
function displayImage($previewDiv, imageUrl) {

    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();
}
</script>

uploaderPreviewer.js - 変更された機能

<script>
    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.append('<img src="' + imageUrl + '"/>');

    }
</script>
4

2 に答える 2

4

わかりました、これを試してください：

編集するには：

displayImage関数を次のように置き換えます。

function displayImage($previewDiv, imageUrl) {
//New
var yourCustomPreview = $('#custompreview');
var imageId = $($previewDiv.context).attr('id');
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
    if(!yourCustomPreview.find('#' + imageId +'_prev').length > 0)
    {
      yourCustomPreview.append('<img id="' + imageId + '_prev" src="' + imageUrl + '"/>');
    }
    else
    {
      $('#' + imageId +'_prev').attr('src', imageUrl);
    }
}

削除するには

removeImage関数を次のように置き換えます。

function removeImage($removeImageButton, errorDisplayed) {

    var thumbIdToDelete = $removeImageButton.parents('table').find('[name=imageToUpload]').attr('id');
    var $parent = $removeImageButton.parents('table:first').parent();

    $.post($.uploaderPreviewer.removeImageAjaxUrl, {
        currentUploadedFilename: $parent.find('input:hidden.currentUploadedFilename').val()
    });

    $parent.find('input:hidden.currentUploadedFilename').removeClass('imageLoaded');
    $parent.find('div.previewImage')
        .removeClass('loading imageLoaded')
        .find('img')
        .hide();

    $parent.removeErrorMessage();

    if ( ! errorDisplayed) {
        $parent.find('input:file').val('');
        $removeImageButton.hide();
    }

    $('#' + thumbIdToDelete +'_prev').remove();
};
于 2012-07-25T17:28:30.490 に答える
0

キャッシュが原因かどうか、

`yourCustomPreview.append('<img src="' + imageUrl+'?'+new Date().getTime() + '"/>');`

このコードを試してください。

于 2012-07-25T08:10:38.527 に答える