Ajax/Js图像上传器:创建重复的预览图像
Ajax/Js Image uploader: Creating duplicate preview images
我正在使用这个站点的Ajax图像上传器。我目前在创建重复的预览图像时做到了:一个出现在输入字段下,另一个将出现在页面的其他地方,类似于"这就是你选择的"。问题是,如果用户选择了一个文件,该功能将显示图像,但如果用户改变主意并选择了新图像,则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>
好的,试试这个:
编辑:
将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();
};
是否是缓存原因,
`yourCustomPreview.append('<img src="' + imageUrl+'?'+new Date().getTime() + '"/>');`
试试这个代码;
相关文章:
- 为在外部单击时关闭的库图像创建预览效果
- 如何为图像创建“另存为”按钮
- 如何为图像创建具有随机大小的磁贴照片库
- 从网页中的 2 张图像创建新图像
- Javascript/Canvas - 从预先存在的图像创建新图像
- 从 1 个图像创建多个过渡按钮
- 使用 JavaScript 和 CSS 使用 2 张图像创建进度条
- 建议为选择图像创建代码
- 如何从 mysql 数据库中的图像创建图像幻灯片
- 已经为单个图像创建了点击效果,但希望其他图像具有相同的效果
- 如何限制xml文件中显示的12个图像,并自动为其他图像创建页面
- 通过数据库为图像创建上传/下载功能
- Javascript客户端-从网页上的现有图像创建新图像
- Jquery动态图像创建和动画
- 为容器中的非全宽图像创建视差效果
- 为滑块上显示的每个图像创建一个id(Basic jQuery slider)
- 简单的JSZip -从现有的图像创建Zip文件
- 在javascript上从图像创建画布
- 如何从图像创建缩略图
- 在复制时,TinyMCE PowerPaste插件并不总是为图像创建base64字符串