Question

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

<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（）上设置文件，以便所选文件名显示在标记中：

this.fileUpload = event.target.files[0];

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

Answer 1

对不起，如果可以的话，我会将其发布为一个问题，但我还不能，所以这是一个答案：

我尝试了一下。如果可以关闭微调器，则一旦用户单击该按钮，就有可能在输入click事件时开始加载，并在onChange方法中取消加载。

旋转器/加载器的问题是，据我所知，取消上载对话框不会触发任何操作。因此，存在一个问题，在这种情况下，什么时候才是停止计时器的时间？

有可能在模糊事件上对此进行注册。但是，这种方法假定用户一旦关闭上载对话框，便会在页面上单击某处。不太确定这是否真的是您的选择。

component.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>

这是一个堆叠闪电战：stackblitz

Answer 2

看看这个例子

function _(el) {
  return document.getElementById(el);
}

function uploadFile() {
  var file = _("file1").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "file_upload_parser.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
  //use file_upload_parser.php from above url
  ajax.send(formdata);
}

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0; //wil clear progress bar after successful upload
}

function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}

function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}

<h2>HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1" onchange="uploadFile()"><br>
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <h3 id="status"></h3>
  <p id="loaded_n_total"></p>
</form>

选择文件后进行中

2 个答案: