角度2の複数のファイルをアップロード

Question

複数のファイル（PDFまたはさまざまな画像形式）をアップロードしようとしています。現在、1つのファイルをアップロードすると機能しますが、複数のファイルはアップロードされません。

これはコードです：複数のファイルをアップロードを行うにはどのように私を助けて

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

：

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> 

スクリプト。

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