javascript - Angular : How to Add/Remove Files in the Angular?

原文 标签 javascript angular

在这里,我选择了多个图像并使用 *ngFor 显示在那里我放置了一个出现在屏幕截图中的删除按钮,单击删除按钮我想从所选列表中删除所选图像我尝试了下面的代码但我没有得到正确的解决方案。

This is My UI sceenshot

添加组件.html

<button mat-raised-button (click)="fileInput.click()">Select File</button>

<input style="display: none" type="file" (change)="onFileChanged($event)" #fileInput multiple="true">

<div *ngFor="let selected of selectedFile;let index = index">
  <h3>{{selected.name}}</h3>
  <button mat-icon-button (click)="removeSelectedFile(index)">delete</button>
</div>

添加.component.ts
selectedFile: File;
ArrayOfSelectedFile = new Array<string>();

onFileChanged(event : any) {
  this.ArrayOfSelectedFile= [];
  this.selectedFile = event.target.files;
  this.ArrayOfSelectedFile.push(event.target.files);
}

removeSelectedFile(index){
  this.ArrayOfSelectedFile.splice(index,1);
}

最佳答案

HTML代码:

<button mat-raised-button (click)="fileInput.click()">Select File</button>

<input style="display: none"  #attachments type="file" (change)="onFileChanged($event)" #fileInput multiple="true">

<div *ngFor="let selected of listOfFiles;let index = index">
  <h3>{{selected}}</h3>
  <button mat-icon-button (click)="removeSelectedFile(index)">delete</button>
</div>
和 TS 代码:
导入这个:
import { Component, OnInit, Inject, ViewChild } from '@angular/core';
在您的组件类中:
@ViewChild('attachments') attachment: any;

fileList: File[] = [];
listOfFiles: any[] = [];

onFileChanged(event: any) {
    for (var i = 0; i <= event.target.files.length - 1; i++) {
      var selectedFile = event.target.files[i];
      this.fileList.push(selectedFile);
      this.listOfFiles.push(selectedFile.name)
  }

  this.attachment.nativeElement.value = '';
}



removeSelectedFile(index) {
 // Delete the item from fileNames list
 this.listOfFiles.splice(index, 1);
 // delete file from FileList
 this.fileList.splice(index, 1);
}
如果您注意到已删除的文件无法再次上传,因为我使用了 @ViewChild重置 value = '' ,然后您可以再次选择已删除的文件。
这是一个工作 StackBlitz 例子。

关于javascript - Angular : How to Add/Remove Files in the Angular?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53536826/

相关文章:

angular - 成功在Angular中执行POST后的HttpErrorResponse 200

javascript - http请求前的数据过滤器完全

json - 如何从 package.json 加载 Angular (v4+) 应用程序中的版本号?

javascript - 在 Angular 2+ 组件中使用全局替换方法

css - 为什么 Angular Material 选择会溢出屏幕

javascript - 使用 JWPlayer 在网页上集成字幕

javascript - 如何在for循环上使用.getElementsByClassName()来隐藏HTML元素

java - JSF:WAITING派对,然后重定向

javascript - 使用JS更改div的多个attr

javascript - 谷歌地图 : place ID array over 10 doesn't work