загрузка и удаление изображений

245
24 августа 2018, 18:10

у меня есть форма для заполнения полей и выбора файлов

<form method="post" id="addNewAdvert" action="/advert/editAdvert/<?=$AdvertData['id']?>" enctype="multipart/form-data">
                <label for="title"><?=$text_title?></label>
                <input type="text" id="title" value="<?=$AdvertData['title']?>" name="title" />
                <label for="keywords"><?=$text_keywords?></label>
                <input type="text" id="keywords" value="<?=$AdvertData['keywords']?>" name="keywords" />
                <input type="hidden" name="category_id" id="categoryIdInput" value="<?=$id?>" />
                <input type="hidden" name="adv_id" id="advertIdInput" value="<?=$AdvertData['id']?>" />
                <div class="clearfix"></div>
                <label for="description"><?=$text_description?></label>
                <input type="text" value="<?=$AdvertData['description']?>" id="description" name="description" />
                <div class="col-sm-12" style="margin: 10px 0px;">
                    <label for="images"><?=$text_images_advert?></label>
                    <input type="file" name="images_advert[]" id="images" multiple="true" />
                </div>
                <?php if(!empty($AdvertData['imgs'])): ?>
                <div class="col-sm-12 ">
                    <section class="awSlider">
                        <div  class="carousel slide" data-ride="carousel">
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                                <?php foreach ($AdvertData['imgs'] as $k => $v): ?>
                                    <div class="item <?=($k == 0)?'active':''?>" id="<?=$v['name_img_file']?>">
                                        <a href="/advert/deleteimg/<?=$AdvertData['id']?>/<?=$v['name_img_file']?>/<?=$AdvertData['seo']?>" data="<?=$v['name_img_file']?>" class="btnDeleteImg" title="<?=$text_delete?>"><i class="fa fa-trash-o"></i></a>
                                        <img src="http://napt.it/<?=$v['src']?>" alt="<?=$AdvertData['seo']?>" class="image img-responsive" title="<?=$AdvertData['title']?>" />
                                    </div>
                                <?php endforeach ?>
                            </div>
                            <a class="left carousel-control" href=".carousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            </a>
                            <a class="right carousel-control" href=".carousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            </a>
                        </div>
                    </section>
                </div>
                <?php endif ?>
                <button type="submit" id="addPost" name="editPost"><?=$text_save?></button>
                <p class="addedSuccess"></p>
                <div id="loader"></div>
            </form>

это часть кода со страницы редактирования объявления, поэтому там вставки php у меня не получается сделать сделать загрузку и удаление изображений через ajax далее действие при нажатии на кнопку сохранить:

$(function() {
    $('button#addPost').bind('click', function (e) {
        e.preventDefault();
        $('#fullTextAdvert').html($('#fullTextAdvert_ifr').contents().find("body#tinymce").html());
        var id_adv = $('#advertIdInput').val();
        $.ajax({                             
            url: $('form#addNewAdvert').attr('action'),
            type:'post',
            contentType: false,
            processData: false,
            data: new FormData($('#addNewAdvert').get(0)),
            dataType: 'json',
            cache: false,
            beforeSend: function () {
                $('#loader').css('display', 'block');
                $('#loader').html("<i class='fa fa-spinner fa-spin fa-3x fa-fw'></i>");
            },
            success: function (result) {
                $('.errorList li').remove();
                $('#loader').css('display', 'none');
                if(result.errors.length > 0) {
                    $.map(result.errors, function(item) {
                      $('.errorList').append('<li>' + item + '</li>');
                    });
                } else {
                    $('.addedSuccess').css('display','block');
                    $('.addedSuccess').html(result.success);
                    if($('.item').length == 0) {
                        loadImages(id_adv);
                    }
                }
            }
        });
    });
});

тут этим отрывком

if($('.item').length == 0) {
     loadImages(id_adv);
}

я проверяю если нет в карусели изображений тогда я отправляю другой ajax чтоб взять загруженные изображения из базы и вывести их в эту карусель

function loadImages (id_adv) {
    $.ajax({
        url:'index.php?route=ajax/GetImgsList',
        type: 'post',
        data: {id: id_adv},
        dataType:'json',
        success: function(data) {
            var active = '';
            $('section.awSlider').css('display','block');
            $.each(data, function(k, v) {
                if (k == 0) active = 'active';
                $('.carousel-inner').append('<div class="item '+ active + '" id=' + v['name_img_file'] + '><a href="/advert/deleteimg/' + id_adv + '/' + v['name_img_file'] + '/<?=$AdvertData["seo"]?>" data = "' + v['name_img_file'] + '" class="btnDeleteImg" title="<?=$text_delete?>"><i class="fa fa-trash-o"></i></a><img src="http://napt.it/' + v['src'] + '" alt="<?=$AdvertData["seo"]?>" class="image img-responsive" title="<?=$AdvertData["title"]?>" /></div>')
            });
        }
    });
}

проблема в том что когда я загружаю 2 изображения они в блоке не появляются но есть в базе и после обновления они появляются, когда я загружаю 1 изображение оно появляется но при нажатии на кнопку удаления то срабатывает удаление с перезагрузкой страницы, как правильно реализовать появление изображений на странице без перезагрузки после нажатия на кнопку сохранить

READ ALSO
Как сделать на JavaScript функцию? [закрыт]

Как сделать на JavaScript функцию? [закрыт]

Люди добрые, помогите, очень нужна помощьНужно написать функцию, которая перебирает целые числа от 0 до бесконечности и выводит на экран,...

158
yarn encore chartist is not defined

yarn encore chartist is not defined

Загрузка зависимости не подключила ChartistСоответственно вызов new Chartist в файле выдает is not defined

176
как открыть blob в electron.js не скачивая его

как открыть blob в electron.js не скачивая его

приходит ответ с сервера Blob {size: 81996, type: "application/octet-stream"}, это pdf файл, с помощью библиотеки filesaver он сохраняетсявсе происходит через этот метод,...

172
Установка Node.JS через NVM

Установка Node.JS через NVM

Установил nvm на windows 8(C:\ProgramFiles\nvm)

177