Angular 2上传多个文件

Question

我试图上传多个文件（PDF或各种图像格式）。现在上传单个文件有效，但多个不能。

这是代码：

HTML：

<div> 
    <label> Upload PDF(s) or Images (PNG/JPG/DICOM/DCM):</label> 
    <div class="ctrl"> 
     <div class="icon"> 
      <i class="fa fa-file-image-o"></i> 
     </div> 
     <input type="file" (change)="onChange($event)"/> 
     <md-input class="ctrl" [(ngModel)]="fileName"></md-input> 
    </div> 
</div> 

脚本：

onChange(event: any) { 
    this.fileName = event.srcElement.files[0].name; 
} 

帮助我如何做多个文件上传。

Answer 1

的multiple属性添加到您输入：

<input type="file" (change)="onChange($event)" multiple /> 

并显示在你输入的所有的文件名，在这个plunker做到这一点，如：https://plnkr.co/edit/WvkNbwXpAkD14r417cYM?p=preview

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <input type="file" multiple (change)="onChange($event, showFileNames)" /> 
     <input #showFileNames /> 
    </div> 
    `, 
}) 
export class App { 
    constructor() { 
    this.name = 'Angular2' 
    } 

    onChange(event: any, input: any) { 
    let files = [].slice.call(event.target.files); 

    input.value = files.map(f => f.name).join(', '); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

或使用变量，而不是直接将其输入到该输入中！

Answer 2

你可以试试这个它为我工作;）

https://github.com/jkuri/ng2-uploader