阿贾克斯/ JS图片上传：创建重复preVIEW图片

本文介绍了阿贾克斯/ JS图片上传：创建重复preVIEW图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正与此网站一个Ajax imageuploader。我目前实现创建重复preVIEW图片：一种出现在输入栏和其他将在东西出现在其他地方，在页面，如这个你选择了什么。问题是，如果用户选择一个文件时，该功能将显示图像，但如果用户改变了主意，选择一个新的图像，然后在 yourCustom preVIEW 将显示所选择的新形象和旧的。

有只是有没有旧的preVIEW画面出现的显示最近preVIEW图片的方式吗？如果不清楚请查看源文件这里

上传previewer.js-原有的功能

 ＆LT;脚本＆GT;
功能displayImage（$previewDiv，IMAGEURL）{

    变种映像文件名称= imageUrl.substr（imageUrl.lastIndexOf（'/'）+ 1）;

    $previewDiv
        .removeClass（'装'）
        .addClass（'imageLoaded）
        .find（IMG）
        .attr（'src'中，IMAGEURL）
        。显示（）;
    $previewDiv
        。父母（'表：第一'）
        .find（'输入：hidden.currentUploadedFilename）
        .VAL（映像文件名称）
        .addClass（'imageLoaded'）;
    $previewDiv
        。父母（'表：第一'）
        .find（'button.removeImage）
        。显示（）;
}
＆LT; / SCRIPT＆GT;

上传previewer.js-修改功能

 ＆LT;脚本＆GT;
    功能displayImage（$previewDiv，IMAGEURL）{
    //新
    VAR yourCustom preVIEW = $（'＃定制preVIEW'）;

    变种映像文件名称= imageUrl.substr（imageUrl.lastIndexOf（'/'）+ 1）;

    $previewDiv
        .removeClass（'装'）
        .addClass（'imageLoaded）
        .find（IMG）
        .attr（'src'中，IMAGEURL）
        。显示（）;
    $previewDiv
        。父母（'表：第一'）
        .find（'输入：hidden.currentUploadedFilename）
        .VAL（映像文件名称）
        .addClass（'imageLoaded'）;
    $previewDiv
        。父母（'表：第一'）
        .find（'button.removeImage）
        。显示（）;

        //新
        yourCustom preview.append（'＆LT; IMG SRC =+ IMAGEURL +/＆GT;'）;

    }
＆LT; / SCRIPT＆GT;

解决方案

没关系，试试这个：

进行编辑：

本替换displayImage功能：

 函数displayImage（$previewDiv，IMAGEURL）{
//新
VAR yourCustom preVIEW = $（'＃定制preVIEW'）;
VAR imageId = $（$previewDiv.context）.attr（'身份证'）;
变种映像文件名称= imageUrl.substr（imageUrl.lastIndexOf（'/'）+ 1）;

$previewDiv
    .removeClass（'装'）
    .addClass（'imageLoaded）
    .find（IMG）
    .attr（'src'中，IMAGEURL）
    。显示（）;
$previewDiv
    。父母（'表：第一'）
    .find（'输入：hidden.currentUploadedFilename）
    .VAL（映像文件名称）
    .addClass（'imageLoaded'）;
$previewDiv
    。父母（'表：第一'）
    .find（'button.removeImage）
    。显示（）;

    //新
    如果（yourCustom preview.find（'＃'+ imageId +'_ preV）长度GT;！0）
    {
      yourCustom preview.append（'＆LT; IMG ID =+ imageId +'_ preVSRC =+ IMAGEURL +/＆GT;'）;
    }
    其他
    {
      $（'＃'+ imageId +'_ preV）ATTR（SRC，IMAGEURL）。
    }
}

，删除

本替换removeImage功能：

 函数removeImage（$ removeImageButton，errorDisplayed）{

    。VAR thumbIdToDelete = $ removeImageButton.parents（'表'）找到（'[NAME = imageToUpload]'）ATTR（'身份证'）。
    变量$父= $ removeImageButton.parents（'表：第一'）父（）。

    $。员额（$。上传previewer.removeImageAjaxUrl，{
        currentUploadedFilename：$ parent.find（'输入：hidden.currentUploadedFilename）VAL（）。
    }）;

    $ parent.find（'输入：hidden.currentUploadedFilename）removeClass移除（'imageLoaded'）。
    $ parent.find（'股利。previewImage'）
        .removeClass（'装载imageLoaded）
        .find（IMG）
        。隐藏（）;

    $ parent.removeErrorMessage（）;

    如果（！errorDisplayed）{
        $ parent.find（'输入：文件'）VAL（''）。
        $ removeImageButton.hide（）;
    }

    $（'＃'+ thumbIdToDelete +'_ preV）删除（）。
};

I am working with an Ajax imageuploader from this SITE. I currently achieve in creating duplicate preview images: one appears under the input field and the other will appear somewhere else in the page under something like "this what you chose". The problem is that if the user selects a file, the function will display the Image but if the user changes its mind and chooses a new image then the yourCustomPreview will show the new image chosen and the old.

Is there a way of just having the most recent preview picture shown without the old preview picture appearing? If unclear please check the source files HERE

uploaderPreviewer.js- Original function

<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- Modified function

<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>

解决方案

ok, try this:

TO EDIT:

replace the displayImage function with this:

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

TO DELETE

replace removeImage function with this:

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

这篇关于阿贾克斯/ JS图片上传：创建重复preVIEW图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！