Angular 2 如何从多个输入类型文件中删除文件？答案

【问题标题】：Angular 2 How to remove file from files of input type file multiple?Angular 2 如何从多个输入类型文件中删除文件？
【发布时间】：2018-04-24 09:57:19
【问题描述】：

如何从具有多个属性的输入类型选择的文件中删除特定文件？

<input type="file" (change)="onFileChange($event)" #fileInput multiple>

我想删除一个选定的文件。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

https://jsfiddle.net/Sagokharche/eL3eg6k4/

【问题讨论】：

请发帖和onFileChange()代码
onFileChange 函数内部还没有任何内容。 @OnnaB

标签： javascript angular angular5

【解决方案1】：

你需要它是不可能选择的吗？然后使用HTML Input file accept 属性。以accept="image/png" 为例。

或者您希望它在用户选择后从输入中过滤？然后您应该使用自定义指令或在上传时检查 ts 代码中的文件类型。

编辑在这种情况下，在您的代码中：

onFileChange(event) {
    const fileList = event.target.files;
    console.log("User selected fileList:", fileList)
    Array.from(fileList).filter(
      item => {
        console.log("file mime type:", item['type'])
      })

    const filesToUpload = Array.from(fileList).filter(
      item => { return item['type'] != "application/zip" })

    console.log("reduced list:", filesToUpload)
  }

Working stackblitz example here.

【讨论】：

我想在用户选择后过滤它。
我们如何从实际输入类型文件中删除它？请查看显示 2 个文件的屏幕截图，从文件列表中删除一个文件后，它应该显示 1。
@ForestG 我有一个问题，如何在 ws 中发布这个文件？我有一个类似的例子，我的文件在 ws 中为空：urlSearchParams.append('files', this.files) 这是我的帖子：stackoverflow.com/questions/49942899/… 谢谢
我不明白。我提供的代码显示过滤后的数据仅包含特定的文件类型。您可以继续使用该数组，并且您的文件将从其中“删除”。如果需要，您可以使用 ngModel 绑定再次绑定它，但从用户体验的角度来看，这完全没有意义。

【解决方案2】：

您可以像这样访问 .ts 端的输入 FileList-object：

onFileChange(event) {
    console.log(event.srcElement.files);
}

编辑：如果您正在寻找如何制作动态表单（添加和删除输入）的解决方案，请查看此答案和演示： Angular 4 Form FormArray Add a Button to add or delete a form input row

【讨论】：

我想从 srcElement.files 中删除文件，但不在 onFileChange 上。我想做删除按钮点击，在这种情况下我不会得到事件。
@SagarKharche 更新了答案，其中包含指向可能重复项的链接。

【解决方案3】：

在您的 hmtl 代码中

<div class="row">
    <div class="col-md-2 productAddfromImages" *ngFor='let url of imageurls; let i = index'>
      <img class="img-fluid" [src]="url.base64String">
      <a (click)="removeImage(i)" class="btn btn-xs btn-danger">Remove</a>
    </div>
    

  </div>

删除功能

  removeImage(i) {
     this.imageurls.splice(i, 1);
  }

添加功能

onSelectFile(event) {
if (event.target.files && event.target.files[0]) {
  var filesAmount = event.target.files.length;
  for (let i = 0; i < filesAmount; i++) {
    var reader = new FileReader();

    reader.onload = (event: any) => {
      this.imageurls.push({ base64String: event.target.result, });
    }
    reader.readAsDataURL(event.target.files[i]);
   }
   }
  }
 }

【讨论】：