[英]Progress Bar in ng2-file-upload in Angular 6
Id like to create a progress bar to my file upload. 我想为我的文件上传创建一个进度条。
The Upload I'm using is: https://www.npmjs.com/package/ng2-file-upload. 我正在使用的上传是: https : //www.npmjs.com/package/ng2-file-upload。
app.component.html app.component.html
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<input type="file" name="myFile" ng2FileSelect [uploader]="uploader" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
Upload an Image
</button>
</div>
</div>
</div>
app.component.ts app.component.ts
import { Component, ViewChild } from '@angular/core';
import { FileUploader, FileSelectDirective } from 'ng2-file-upload';
const URL = 'url to API';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'myFile' });
ngOnInit() {
this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
console.log('ImageUpload:uploaded:', item, status, response);
alert('File uploaded successfully');
};
}
}
Everything is working fine but Id like to put a progress bar, only this. 一切都工作正常,但我想放一个进度条,只有这个。
You can listen to progress here 你可以在这里听取进展
this.uploader.onProgressItem = (progress: any) => {
console.log(progress['progress']);
};
In your app.component.html
include : 在您的
app.component.html
包含:
<div class="progress" style="margin-bottom: 0;"> <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.