Javascript 选择文件后正在进行

我有一个按钮，单击该按钮将弹出文件选择器，如下代码：

<button mat-raised-button (click)="inputFile.click()">Choose a file</button>
<input #inputFile type="file" [style.display]="'none'" (change)="onChange($event)">
<label>{{fileUpload.name}}</label>

---

但是，当文件很大时，似乎什么都没有发生。在显示文件名之前，标签为空白。在等待设置文件时，是否有方法放置进度/微调器？

很抱歉，如果可以，我会将此作为一个问题发布，但我现在还不能，因此这是一个答案：

我试了一下。如果可以设置微调器，只要用户单击按钮，就有可能启动输入时加载单击事件，并取消onChange方法中的加载

微调器/加载器的问题是，据我所知，取消上载对话框不会触发任何事件。因此有一个问题，在这种情况下，什么是停止计时器的正确时间

可以在模糊事件中注册此项。不过，这种方法假设用户在关闭上传对话框后会单击页面上的某个位置。不太确定这是否是你的选择

组件。ts

fileUpload: any;
loading: boolean;

@ViewChild('inputFile') inputFile;
@ViewChild('buttonElem') buttonElem;

onChange(event: any) {
  this.loading = false;
  this.fileUpload = event.target.files[0];
}

onBlur() {
  if(this.loading && document.activeElement !== 
      this.buttonElem.nativeElement) {
    this.loading = false;
  }
}

openDialog() {
  this.inputFile.nativeElement.value = '';
  this.inputFile.nativeElement.click();
}

模板

<div>
  <button #buttonElem mat-raised-button (blur)="onBlur()" 
     (click)="openDialog()">Choose a file</button>
  <input #inputFile type="file" [style.display]="'none'" (click)="loading = 
      true" (change)="onChange($event)">
  <label *ngIf="fileUpload">{{fileUpload.name}}</label>
</div>

<div>
  Loading: {{loading}}
</div>

选择一个文件
{{fileUpload.name}
正在加载：{{Loading}

---

这里有一个stackblitz:

看看这个例子

函数（el）{
返回文档.getElementById（el）；
}
函数uploadFile（）{
var file=uU8;（“file1”）.files[0]；
//警报（file.name+“|”+file.size+“|”+file.type）；
var formdata=new formdata（）；
formdata.append（“文件1”，文件）；
var ajax=new-XMLHttpRequest（）；
addEventListener（“progress”，progressHandler，false）；
addEventListener（“加载”，completeHandler，false）；
addEventListener（“error”，errorHandler，false）；
addEventListener（“abort”，abortHandler，false）；
open（“POST”，“file_upload_parser.php”）；//http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
//从上面的url使用文件\u upload\u parser.php
发送（formdata）；
}
函数progressHandler（事件）{
_（“已加载的总数”）.innerHTML=“上载的”+event.loaded+“字节数”+event.total；
变量百分比=（event.loaded/event.total）*100；
_（“progressBar”）.value=数学四舍五入（百分比）；
_（“状态”）.innerHTML=Math.round（百分比）+%upload…请稍候；
}
函数completeHandler（事件）{
_（“状态”）.innerHTML=event.target.responseText；
_（“进度条”）.value=0；//上传成功后将清除进度条
}
函数errorHandler（事件）{
_（“状态”）.innerHTML=“上传失败”；
}
函数abortHandler（事件）{
_（“状态”）.innerHTML=“上传中止”；
}

HTML5文件上传进度条教程

<div>
  <button #buttonElem mat-raised-button (blur)="onBlur()" 
     (click)="openDialog()">Choose a file</button>
  <input #inputFile type="file" [style.display]="'none'" (click)="loading = 
      true" (change)="onChange($event)">
  <label *ngIf="fileUpload">{{fileUpload.name}}</label>
</div>

<div>
  Loading: {{loading}}
</div>