2016-09-21 10 views
5

Я пытаюсь загрузить несколько файлов (PDF-файлы или различные форматы изображений). Прямо сейчас загрузка одного файла работает, но несколько нет.Угловая 2 Загрузка нескольких файлов

Это код:

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; 
} 

Помоги мне, как сделать несколько файлов загрузить.

ответ

8

Добавьте атрибут 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 {} 

Или использовать переменную вместо положив его прямо на этот вход!

+0

Спасибо за ответ. Но все равно показывается один файл. – NNR

+0

Показаны, да .. Потому что вы используете 'files [0] .name' .. но загружаете? это был вопрос, не так ли? :) – mxii

+0

Что я пытаюсь, у меня есть опция загрузки файлов. Где я могу загрузить один или несколько файлов. Когда я нажимаю кнопку «Добавить», он должен отправлять имена загруженных файлов. Сейчас отображается только имя недавно загруженного файла. – NNR

Смежные вопросы