我试图上传多个文件(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 {}
或者使用您的变量而不是直接将其放入该输入!