Góc 2 tải lên nhiều tệp

Question

Tôi đang cố gắng tải lên nhiều tệp (PDF hoặc các định dạng hình ảnh khác nhau). Hiện tại, việc tải lên một tệp có tác dụng, nhưng nhiều tệp thì không.

Đây là mã:

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

giúp tôi làm thế nào để làm nhiều file tải lên.

Answer 1

Thêm thuộc tính multiple để bạn nhập vào:

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

Và để hiển thị tất cả các tên tập tin trong đầu vào của bạn, làm điều đó như thế nào trong plunker này: 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 {} 

Hoặc sử dụng biến của bạn thay vì đưa nó trực tiếp vào đầu vào đó!

Answer 2

bạn có thể thử này nó làm việc cho tôi;)

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