Ajax/Js 图片上传器：创建重复的预览图片答案

【问题标题】：Ajax/Js Image uploader: Creating duplicate preview imagesAjax/Js 图片上传器：创建重复的预览图片
【发布时间】：2012-07-23 11:38:29
【问题描述】：

我正在使用来自 SITE 的 Ajax 图像上传器。我目前实现了创建重复的预览图像：一个出现在输入字段下，另一个将出现在页面中的其他位置，例如“这就是你选择的”。问题是，如果用户选择一个文件，该函数将显示图像，但如果用户改变主意并选择新图像，那么yourCustomPreview 将显示选择的新图像和旧图像。

有没有办法只显示最新的预览图片而不显示旧的预览图片？如果不清楚请查看源文件HERE

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>

【问题讨论】：

嘿！我在这里！您有在线工作的“custompreview”示例吗？
@MCSI 嘿！很高兴见到你。这是我的在线工作示例SITE。如您所见，如果您决定更改原始图片，预览图像不会更新。

标签： javascript jquery html css ajax

【解决方案1】：

好的，试试这个：

编辑：

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

【讨论】：

太棒了！我觉得你的项目的一部分哈哈
哈哈，你是代码下项目的一部分，如果你同意我会把这个//Thanks to MCSI(http://stackoverflow.com/users/1013426/mcsi) for modifiying the code
嗨，我的朋友，我已将代码更新为SITE。但是另一个问题来了，如果用户删除预览图像，重复的仍然显示在This is the current picture you have chosen:
好吧，现在完美！很抱歉没有澄清这一点。你已经完美地解决了这个问题。谢谢！

【解决方案2】：

是否是缓存原因，

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

试试这个代码；

【讨论】：