Question

我想在上传某个文件时添加加载程序图标。如何将其设置为上次完成上传？

我有一个简单的上传表单，我想上传文档并单击“保存”按钮，然后加载程序应弹出并显示自己，直到文件上传。

<input type="file" (change)="AddFiles($event)" />
<button type="submit">Save</button>

TS：

addFiles(event: EventTarget) {
    // this.file = [];
    const eventObj: MSInputMethodContext = <MSInputMethodContext> event;
    const target: HTMLInputElement = <HTMLInputElement> eventObj.target;
    const files: FileList = target.files;
    if (files.length !== 0) {
      this.file = [];
      this.file.push(files[0]);
      this.uploadFlag = true;
    } else {
      this.uploadFlag = false;
    }

  }

这是添加文件的代码，我想要做的就是单击Save show loader直到完成。

Answer 1

你可以这样做：

<div align="center" *ngIf="result?.length == 0">Waiting ...</div>
  <div id="loader-home" align="center" *ngIf="result?.length == 0">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
  </div>

每个反弹类代表一个气泡（用css调整以逐个反弹）

    /* LOADER */
  #loader-home {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; }
  #loader-home > div {
    width: 18px;
    height: 18px;
    background-color: black;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
  #loader-home .bounce1 {
    animation-delay: -0.32s; }
  #loader-home .bounce2 {
    animation-delay: -0.16s; }
  #loader-home .bounce3 {
    animation-delay: -0.08s; }

“result”变量是您的observable

的结果

 this.data.import(uploadResult)
        .map((res: any) => res.errorMessage)
        .subscribe(result => {
        this.result = result;
...}

如何在文件上传之前显示加载程序？ Angular 2

1 个答案: