Ajax/Js图像上传器：创建重复的预览图像

我正在使用此SITE的Ajax图像上传器。我目前在创建重复的预览图像方面取得了进展：一个出现在输入字段下，另一个出现在页面的其他地方，像“你选择什么”这样的东西。问题是，如果用户选择一个文件，该功能将显示图像，但如果用户改变主意并选择新图像，则yourCustomPreview将显示选择的新图像和旧图像。Ajax/Js图像上传器：创建重复的预览图像

有没有办法显示最近的预览图片而不显示旧的预览图片？如果有不清楚的请查看源文件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>

来源

2012-07-25 CodingWonders90

哎！我在这里！你有没有在网上工作的“custompreview”的例子？ – MCSI 2012-07-25 12:05:06

@MCSI嘿！很高兴见到你。这里是我的在线工作示例[SITE]（http://webprolearner.ueuo.com/imageupload/index.php）。如果您决定更改原始图片，您会看到预览图像不会更新。 – CodingWonders90 2012-07-25 16:12:06

没关系，试试这个：

进行编辑：

这种替换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-25 17:28:30 MCSI

+ 3我的朋友非常感谢你，这很完美。 – CodingWonders90 2012-07-25 17:38:48

太棒了！我觉得你的项目的一部分haha – MCSI 2012-07-25 17:40:43

哈哈你是代码下的项目的一部分，如果你还可以，我会把这个'/ /感谢MCSI（http://stackoverflow.com/users/1013426/mcsi）进行修改代码' – CodingWonders90 2012-07-25 17:43:43

是否是缓存的原因，

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

试试这段代码;

来源

2012-07-25 08:10:38 YangHongChang

Ajax/Js图像上传器：创建重复的预览图像

回答

相关问题