Question

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

<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/

Answer 1

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

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

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

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

Answer 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

Answer 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]);
   }
   }
  }
 }

有关更多详细信息：https://stackoverflow.com/a/2709967/10088259

Angular 2如何从输入类型文件的文件中删除文件？

3 个答案: