html – Angular 2上传多个文件

前端之家收集整理的这篇文章主要介绍了html – Angular 2上传多个文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图上传多个文件(PDF或各种图像格式).现在上传单个文件有效,但多个不起作用.

这是代码

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

帮我看看如何上传多个文件.

解决方法

将多个属性添加到您输入:
<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 {}

或者使用您的变量而不是直接将其放入该输入!

猜你在找的HTML相关文章