Angular 2上传多个文件 [英] Angular 2 upload multiple files
本文介绍了Angular 2上传多个文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图上传多个文件(PDF或各种图像格式).现在上传单个文件有效,但多个文件无效.
I trying to upload multiple files (PDFs or various image formats). Right now uploading a single file works, but multiple does not.
这是代码:
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;
}
帮我如何上传多个文件.
Help me how to do multiple files upload.
推荐答案
在输入的内容中添加multiple
属性:
Add the multiple
attribute to you input:
<input type="file" (change)="onChange($event)" multiple />
要显示输入中的所有文件名,请像下面的代码一样进行操作: https://plnkr.co/edit/WvkNbwXpAkD14r417cYM?p=preview
And to show all file names in your input, do it like in this 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 {}
或者使用您的变量,而不是直接将其放入该输入中!
Or use your variable instead of putting it directly to that input!
这篇关于Angular 2上传多个文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文