Angular 2 mehrere Dateien hochladen

Question

Ich versuche, mehrere Dateien (PDFs oder verschiedene Bildformate) hochzuladen. Im Moment funktioniert das Hochladen einer einzelnen Datei, aber mehrere nicht.

Dies ist der Code:

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> 

Script:

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

mir Hilfe, wie mehrere Dateien hochladen zu tun.

Answer 1

Fügen Sie das multiple Attribut Eingabe:

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

Und alle Dateinamen zu zeigen, in Ihrem Eingang, tun Sie es wie in diesem 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 {} 

Oder Ihre Variable anstelle von setze es direkt auf diesen Eingang!

Answer 2

Sie diese es funktionierte für mich versuchen kann;)

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