Angular 2(更改)用于文件上载

Question

我正在使用Angular 2(更改)来检测上传的文件并触发该功能.但是当我尝试再次上传同一个文件时,我遇到了问题,因为文件没有变化,(触发)没有变化.在这种情况下,请建议事件绑定.

<input type="file" name="file" id="fileupload" (change)="onChange($event)"/>

有没有办法将类型文件的输入值重置为空.

Answer 1

您可以作为ViewChild访问文件输入并从中获取文件.

import { Component, ViewChild, ElementRef} '@angular/core';
@Component({
//...
template: `
  <input #fileInput type='file' (change)="fileChanged($event)">
`
//...
})
export class FileInputComponent {
  @ViewChild('fileInput') myFileInput: ElementRef;

  getFileLater() {
    console.log(this.myFileInput.nativeElement.files[0]);
  }

  fileChanged(event) {
    console.log(event.target.files[0]);
  }
}

.files[]即使只选择了一个文件(或者没有选择),nativeElement上的数组也始终是一个数组.它将为您提供与event.target.files从(change)事件中访问时完全相同的文件对象,以便您可以在事后使用它们.

应该提到的是,当在文件输入上选择文件并触发更改事件时,文件实际上并未在任何地方"上传".它只是向浏览器传递一个对它的引用(以及一些其他元数据),客户端可以使用它.实际上上传文件是你必须单独编程的东西.

更新:

为了强制文件输入即使在选择先前选择的文件时也触发更改事件,只要单击"浏览"按钮,就必须通过清除其值来重置文件输入.因为你已经在使用jQuery,所以你可以这样做:$('#fileupload').val("");.

有关工作示例,请参阅我的分叉Plunker.