web-dev-qa-db-fra.com

Angular 2 télécharger plusieurs fichiers

J'essaie de télécharger plusieurs fichiers (PDF ou différents formats d'image). À l'heure actuelle, le téléchargement d'un seul fichier fonctionne, mais pas plusieurs. 

C'est le 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;
}

Aidez-moi à télécharger plusieurs fichiers.

htmlangular
6
NNR

Ajoutez l'attribut multiple à votre entrée:

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

Et pour afficher tous les noms de fichier dans votre entrée, procédez comme dans cet exemple: 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 {}

Ou utilisez votre variable au lieu de la mettre directement dans cette entrée!

9
mxii

vous pouvez essayer cela cela a fonctionné pour moi;)

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

1
Atul Bhalerao