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>
没关系,试试这个:
进行编辑:
这种替换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();
};
+ 3我的朋友非常感谢你,这很完美。 – CodingWonders90 2012-07-25 17:38:48
太棒了!我觉得你的项目的一部分haha – MCSI 2012-07-25 17:40:43
哈哈你是代码下的项目的一部分,如果你还可以,我会把这个'/ /感谢MCSI(http://*.com/users/1013426/mcsi)进行修改代码' – CodingWonders90 2012-07-25 17:43:43
是否是缓存的原因,
`yourCustomPreview.append('<img src="' + imageUrl+'?'+new Date().getTime() + '"/>');`
试试这段代码;
哎!我在这里!你有没有在网上工作的“custompreview”的例子? – MCSI 2012-07-25 12:05:06
@MCSI嘿!很高兴见到你。这里是我的在线工作示例[SITE](http://webprolearner.ueuo.com/imageupload/index.php)。如果您决定更改原始图片,您会看到预览图像不会更新。 – CodingWonders90 2012-07-25 16:12:06