Если коротко, у меня есть таблица с несколькими строками. Под каждой основной строкой у меня есть скрытая строка, которая при нажатии представляет вход для загрузки файлов и кнопку для загрузки.
Что я пытаюсь сделать, так это показать .gif во время обработки изображений и удалить .gif, когда это будет сделано, чтобы пользователь знал, что что-то на самом деле происходит. Каждая строка «загрузки» имеет свой собственный файл .gif, поэтому при нажатии на кнопку загрузки файл .gif должен измениться с отображения: нет на видимый / встроенный блок. Выборка выполняется для загрузки файлов, и в случае успеха она должна удалить .gif, единственная проблема заключается в том, что js не запоминает остальные .gifs.
Я приложу несколько изображений, а затем код js.
Здесь вы можете видеть, если вы нажимаете на знак + , он показывает строку под ним, а строки с ID 4 и 5 скрыты, потому что кнопка не была нажата.
Вот во время процесса загрузки, что происходит, когда я нажимаю Загрузить , добавляется .gif.
В этом третьем все 3 уже выполнены, так как у меня есть предупреждение в качестве подтверждения для отладки. Хотя вы можете видеть, что исчез только один, а у остальных все еще есть .gif. Что я хочу, так это то, что как только ответ от выборки будет в порядке, он должен удалить соответствующий файл .gif, хотя я не имею ни малейшего понятия о том, как решить эту проблему или даже как начать. Возможно, я подумал о массиве, который хранит, какие из них были получены через data- *, но тогда это не имело смысла, так как мне нужно было бы отправить ответ с сервера с этим номером.
код:
function uploadPhotos(url, queryCollection){
this.url = url;
this.queryCollection = queryCollection;
this.upload = function(){
queryCollection.forEach(function(el){
el.addEventListener('submit', e => {
loadingGifEl = el.nextElementSibling;
button = el.closest('form').querySelector('input[type=submit]');
e.preventDefault();
if (loadingGifEl.classList.contains('hidden')) {
loadingGifEl.classList.remove('hidden');
button.classList.add('hidden');
}
const files = el.querySelector('[type=file]').files;
// const contentID = el.closest('tr').getAttribute('data-content-id');
if(el.closest('tr') == null){
var contentID = 0;
}else{
var contentID = el.closest('tr').getAttribute('data-content-id');
}
let formData = new FormData();
for (let i = 0; i < files.length; i++) {
let file = files[i];
formData.append('image_field[]', file, contentID + '___' + file.name);
}
/* Original working */
fetch(url, {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
if (this.button.classList.contains('hidden')) {
this.loadingGifEl.classList.add('hidden');
this.button.classList.remove('hidden');
}
if(Number.isInteger(parseInt(data)) != true)
alert('Erro ao inserir na base de dados');
console.log(data);
})
.catch(function(error){
if (this.button.classList.contains('hidden')) {
this.loadingGifEl.classList.add('hidden');
this.button.classList.remove('hidden');
}
alert('Erro em fazer upload');
console.log(error);
});
});
});
}
}
Как строится HTML:
<table class="table table-hover" id="city-table">
<thead>
<th>ID</th>
<th>Nome(PT)</th>
<th>Descrição(PT)</th>
<th>Popular</th>
<th>Adicionado</th>
<th>Galeria</th>
<th>Ação</th>
</thead>
<tbody>
<?php
$resp = $city->fetchAll();
if(!empty($resp)){
for($cityCounter = 0; $cityCounter < count($resp); $cityCounter++){
switch($resp[$cityCounter]->isPopular){
case 0: $isPopular = 'Não';
break;
case 1: $isPopular = 'Sim';
break;
};
echo '<tr data-content-type="city" data-content-id="'.$resp[$cityCounter]->city_link_ID.'">';
echo '<td>'.$resp[$cityCounter]->city_link_ID.'</td>';
echo '<td>'.$resp[$cityCounter]->nameTranslated.'</td>';
echo '<td>'.$resp[$cityCounter]->descriptionTranslated.'</td>';
echo '<td>'.$isPopular.'</td>';
echo '<td>'.$resp[$cityCounter]->dateCreated.'</td>';
echo '<td>
<a class="btn btn-info btn-xs" id="show-gallery" href="#collapseGallery-'.$resp[$cityCounter]->city_link_ID.'" data-toggle="collapse">
<i class="lnr lnr-plus-circle"></i>
</a>
</td>';
echo '<td>
<a href="?edit=city&id='.$resp[$cityCounter]->city_link_ID.'" class="btn btn-info btn-xs pull-left" style="margin-bottom: 15px"><span class="lnr lnr-pencil"></span></a>
<button class="btn btn-danger btn-xs pull-right" id="delete-city"><span class="lnr lnr-trash"></span></button>
</td></tr>';
echo'
<tr data-content-type="city" data-content-id="'.$resp[$cityCounter]->city_link_ID.'" id="collapseGallery-'.$resp[$cityCounter]->city_link_ID.'" class="collapse">
<td colspan="14" class="bg-info">
<form enctype="multipart/form-data" method="post" class="file-upload" id="'.$resp[$cityCounter]->city_link_ID.'">
<input type="file" class="btn btn-info pull-left" size="100" name="image_field[]" multiple="multiple">
<input type="submit" class="btn btn-primary pull-right" name="Submit" value="Upload">
</form>
<div class="loading-gif-'.$resp[$cityCounter]->city_link_ID.' hidden">
<img style="margin-left: 25%" src="assets/img/processing.gif" alt="A carregar"/>
</div>
</td>
</tr>
';
}
}
?>
</tbody>
</table>