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 我试图上传多个文件(pdf或各种图像格式).现在上传单个文件有效,但多个不起作用.

这是代码：

HTML：

<div>    <label> Upload pdf(s) or Images (PNG/JPG/DICOM/DCM):</label>    <div >        <div >            <i ></i>        </div>        <input type="file" (change)="onChange($event)"/>        <md-input  [(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 – Angular 2上传多个文件全部内容，希望文章能够帮你解决html – Angular 2上传多个文件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。