为每个文件完成 jquery formdata 后隐藏加载器

Question

我正在制作一个文件上传器。这是我的代码，它在 for 循环中将文件发布到 php 文件。 我想在成功上传相关图片后隐藏每个 div 的加载器。但是使用此代码，所有加载程序都将被删除。将图像附加到 div 没有问题，但我不介意在这种情况下我应该如何使用加载程序显示/隐藏。

也许我的代码不够好。我需要一些建议。

 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>');


                    }
                });
            }

Answer 1

您可以为每个加载程序设置 ID（您可以使用 for var 创建 ID） 然后在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();

                }
            });
        }
     }

编辑：修复了一些问题。