Как заменить один img на другой с новым src с помощью JQURY?

Question

[Дмитрий Кривошеин]

Есть форма загрузки. Сама загрузка происходит через `iframe` при помощи jQuery:

<div id="add_photo_1" class="add_photo">
        <div id="plus_photo_1" class="icon_add">+</div>

        <div class="upload">
            <form id="upload_photo_1" method="post" enctype="multipart/form-data" action="/ajax/upload.php" target="frame_photo_1">
                <input type="hidden" name="date" value="29-07-14"> <input id="input_upload_photo_1" class="upload_photo" type="file" name="upload">
            </form><iframe style="display: none;" id="frame_photo_1"></iframe>
        </div>
    </div>

Так это выглядит. `input type=file..` – их пять – имеет вид картинки

По нажатию POST'ом отправляем в обработчик, который возвращает имя фотки.

Вот манипуляция в js:

$(".upload_photo").change(function() {
        //Полючаем ID выбраного Input
        var id = $(this).attr("id").split("_")[3];
        var i = $(this).children('input'); //это импут
        var a = ['jpg', 'png', 'jpeg', 'JPG']; //массив разрешенных расширений для клиентской проверки
        var ext = $(this).val().split('.').pop(); //Получаем расширение файла
        if (a.indexOf(ext) == -1) { //сама проверка расшерения
            i.parent().each(

            function() {
                this.reset();
            });
            return alert('недопустимое расширение файла!');
        }
        // Если все хорошо отпровляем форму 
        $("#upload_photo_" + id).submit();
        //Загружаем ответ в Iframe
        $("#frame_photo_" + id).load(function() {
            iframeContents = $("#frame_photo_" + id)[0].contentWindow.document.body.innerHTML;
            //Если фото загружено 
            var accept = iframeContents.split("__")[0];
            if (accept == 'yas') {
                //получаем имя файла 
                var filename = iframeContents.split("__")[1];
                // Прячем дефолтную заставку 
                $("#plus_photo_" + id).hide();
                // И вставляем туда картинку
                $("#add_photo_" + id).prepend('<img style="display:block; position:absolute; z-index:0; top:0px; max-width:135px; max-height:135px;" src="/photo/advert/crop/' + filename + '" />');
                // Тут присвоем имя файла в скрытый Input[type=text] 
                $("#hidden_photo_" + id).val(filename);
                // А если ошибка выведем ее
            } else {
                alert(accept);
                //$("#upload_photo_"+id).reset();
                this.reset();
            }
        });
    });

И вот тут проблемка! input file..` остаётся рабочим, на случай, если пользователь решит изменить фото. Так вот когда повторно загружаешь картинку (сменяешь на другую), то она просто записывается поверх предыдущей в коде, но само превью остаётся прежним. Как это исправить?

<img style="display:block; position:absolute; z-index:0; top:0px; max-width:135px; max-height:135px;" src="/photo/advert/crop/image_42.jpg">
    <img style="display:block; position:absolute; z-index:0; top:0px; max-width:135px; max-height:135px;" src="/photo/advert/crop/image_41.jpg">

Как я понимаю, перед тем, как вставить `$("#add_photo_"+id).prepend(img..)`, нужно проверить, имеется ли там такой элемент. А как это сделать, не знаю, так как мало опыта в jQuery.

Answer 1

[Сергей Сенкевич]

Попробуйте так:

...
// И вставляем туда картинку
var $img = $('#add_photo_' + id).find('img');
if ($img.length === 0) {
    $("#add_photo_" + id).prepend('<img style="display:block; position:absolute; z-index:0; top:0px; max-width:135px; max-height:135px;" src="/photo/advert/crop/' + filename + '" />');
} else {
    $img.prop('src', '/photo/advert/crop/' + filename);
}
...

Comments

[Евгений Петров]

Не в первый раз замечаю, что вы используете prop вместо attr, что не укладывается в рекомендации. Не могли бы вы сказать, почему? Вроде src — типичный случай для attr().

[Сергей Сенкевич]

В данном случае, не имеет значения, что использовать - prop или attr. Я чаще использую prop т.к. он возвращает исходный тип данных свойства. Здесь использовал prop по привычке).

[Дмитрий Кривошеин]

огромное спасибо помогли!!))

Answer 2

[Scorpi]

Первое что заметил,
var id = $(this).attr("id").split("_")[3];
Индексация в массиве начинается с 0, т.е. вам нужен индекс 2, а не 3.

Comments

[Дмитрий Кривошеин]

да не там просто строка input_uload_photo_1