我正在使用 Ajax 图像上传器SITE http://dondedeportes.es/uploader-previewer/。我目前实现了创建重复的预览图像:一个出现在输入字段下,另一个将出现在页面中的其他位置,例如“这就是您选择的”。问题是,如果用户选择一个文件,该函数将显示图像,但如果用户改变主意并选择一个新图像,则该函数将显示该图像。yourCustomPreview
将显示所选的新图像和旧图像。
有没有办法只显示最新的预览图片而不出现旧的预览图片?如果不清楚请检查源文件HERE http://dondedeportes.es/uploaderPreviewer.zip
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>
好的,试试这个:
TO EDIT:
将 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();
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)