Question

我正在上传文件。这是我的代码，它在for循环中将文件发布到php文件中。在相关图片成功上传后，我想为每个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>');


                    }
                });
            }

Answer 1

您可以为每个加载程序设置ID和ID（可以使用1 (true) var创建ID）然后，在AJAX请求的成功函数中，您可以使用jQuery隐藏加载程序。

这是我的意思：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({providedIn : 'root'})
export class CommonService {

  uri = 'http://localhost:3000/framework';

  constructor(private http: HttpClient) { }

  addFramework(framework, bahasa) {
    const obj = {
      framework: framework,
      bahasa: bahasa
    };
    console.log(obj);
    this.http.post(`${this.uri}/create`, obj)
        .subscribe(res => console.log('Done'));
  }


}

编辑：修复了一些问题。

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

1 个答案: