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

Question

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

Я делаю загрузчик файлов. Вот мой код, который отправляет файлы в файл php в цикле for.
Я хочу скрыть загрузчики для каждого div после того, как соответствующее изображение было успешно загружено. Но с этим кодом все загрузчики удаляются. Нет проблем с добавлением изображений в div, но я не возражаю против того, как использовать загрузчик 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>');


}
});
}

0

jquery loader php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы можете установить и идентификатор для каждого загрузчика (вы можете использовать for вар для создания идентификатора)
Затем в функции успеха запроса 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();

}
});
}
}

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

0