Question

简而言之，我有一个包含多行的表。在每个主行下方，都有一个隐藏行，当按下该行时，将显示一个输入以上传文件和一个按钮以进行上传。我想做的是在处理图像时显示.gif，完成后删除.gif，以便用户知道实际正在发生的事情。每个“上载”行都有其自己的.gif，因此，在单击上载按钮时，.gif应该从显示更改：从无更改为可见/内嵌块。抓取完成后上传了文件，如果上传成功，则应删除.gif，唯一的问题是js不会记住其余的第一个.gif。

请附加一些图片，然后附加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>

Answer 1

使用loadingGifEl与this. loadingGifEl似乎是可疑的。如果我正确理解了您的问题，则希望跟踪显示的实际gif，以便在提取完成后再次将其隐藏。尽管未经测试，但以下内容应该可以使用。如果这不是您想要的，请告诉我。

function uploadPhotos(url, queryCollection){
    this.url = url;
    this.queryCollection = queryCollection;

    this.upload = function(){
        queryCollection.forEach(function(el){
            el.addEventListener('submit', e => {

                var loadingGifEl = el.nextElementSibling;
                var 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 (button.classList.contains('hidden')) {
                        loadingGifEl.classList.add('hidden');
                        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 (button.classList.contains('hidden')) {
                        loadingGifEl.classList.add('hidden');
                        button.classList.remove('hidden');
                    }
                    alert('Erro em fazer upload');
                    console.log(error);
                });
            });
        });
    }
}

JS使用相同的类名动态隐藏/删除div

1 个答案: