Скрытие загрузчика после заполнения jquery formdata для каждого файла - PullRequest
Новая
       10

Скрытие загрузчика после заполнения jquery formdata для каждого файла

0 голосов
/ 21 ноября 2018

Я делаю загрузчик файлов.Вот мой код, который отправляет файлы в файл php в цикле for.Я хочу скрыть загрузчики для каждого div после того, как соответствующее изображение было успешно загружено.Но с этим кодом все загрузчики удаляются.Нет проблем с добавлением изображений в div, но я не возражаю против того, как я должен использовать loader show / hide в этой ситуации.

Возможно, мои коды недостаточно хороши.Мне нужно несколько советов по этому поводу. 

 for (var i = 0; i < input.files.length; i++) {
                var file = this.files[i];
                var fd = new FormData();

                fd.append("th_photo", file);

                var loader = '<div class="content-loader">'+
                '<svg class="loader-circular" viewBox="25 25 50 50">'+
                '<circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>'+
                '</svg>'+
                '</div>';

                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    processData: false,
                    contentType: false,
                    url: '../assets/_php/actions.php',
                    data: fd,
                    beforeSend:function(data){
                        $('.up_preview').append(
                            '<div class="uploaded_photo_loader" id="tmp_'+i+'">'
                            +loader+'</div>');
                    },
                    success:function(data){
                        $('.up_preview').append(
                            '<div class="uploaded_photo_grid">'+
                            '<img class="previewItem" src="'+data.fcontent+'">'+
                            '</img></div>');


                    }
                });
            }

1 Ответ

0 голосов
/ 21 ноября 2018

Вы можете установить и ID для каждого загрузчика (вы можете использовать for var для создания идентификатора). Затем в функции успеха запроса AJAX вы можете использовать jQuery, чтобы скрыть загрузчик.

Вот что я имею в виду: 

for (var i = 0; i < input.files.length; i++) {
var file = this.files[i];
var fd = new FormData();
fd.append("th_photo", file);

console.log("========= START ==========");

var loaderName = 'loader_n' + i + '"';
console.log("-> " + loaderName);

var loader = '<div id="' + loaderName + ' class="content-loader">'+
            '<svg class="loader-circular" viewBox="25 25 50 50">'+
            '<circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>'+
            '</svg>'+
            '</div>';
console.log("-> " + loader);

$.ajax({
    type: 'POST',
    dataType: 'json',
    cache: false,
    processData: false,
    contentType: false,
    url: '../assets/_php/actions.php',
    data: fd,
    beforeSend:function(data){
    $('.up_preview').append(
        '<div class="uploaded_photo_loader" id="tmp_'+i+'">'
         +loader+'</div>');
    },
    success:function(data){
        $('.up_preview').append(
            '<div class="uploaded_photo_grid">'+
            '<img class="previewItem" src="'+data.fcontent+'">'+
            '</img></div>');
        var newName = '"#' + loaderName; //Get the div ID and using it on jQuery
        console.log("-> " + newName);
        $(newName).hide();

                }
            });
        }
     }

РЕДАКТИРОВАТЬ: Исправлены некоторые проблемы.

...