1.思路：

使用p-progressBar，创建一个新画面，浮在p-fileUpload组件所在页面上方。当文件上传进度达到100%时，隐藏该新页面。

2.父页面代码实现：

使用AngularJS命令生成新的component：ng g c xxxx。如果项目有特别设置，修改xxx.module.ts文件。
在父组件中挂载子页面。
其中，progressbarValue是p-fileUpload组件的onProgress($event)中的event.progress传过来的0-100的整型。
html

      <p-fileUpload chooseLabel="xxx" mode="basic" accept=".xxx" maxFileSize="1000000"(onSelect)="onSelect($event)" auto="false" (onProgress)="onProgress($event)"></p-fileUpload>......
<xxx-progressbar #progressBar [progressbarValue]="progressbarValue"></xxx-progressbar>

ts代码中，通过viewChild，调用子页面的public方法，写入title和label，如开头的图片所示。
因为项目中该页面上传文件基本都是秒传，所以加了延迟关闭。

export class xxxComponent extends ContentsBaseViewHelper implements OnInit {@ViewChild('progressBar') progressBar;............/*** @param event*/public onProgress(event: any) {this.progressbarValue = event.progress;const title = 'xxx';const label = 'xxx';this.progressBar.show(title, label + event.progress + '%');if (event.progress === 100) {setTimeout(() => {this.progressBar.close();}, 500);}}
}

3.子页面代码实现

子页面直接看代码：
html

<p-dialog [closeOnEscape]="false" [draggable]="false" [closable]="false" [(visible)]="isDisplay" [modal]="true" [resizable]="false"appendTo="body"><p-header><div class="title"><span>{{progressbarTitle}}</span></div></p-header><div class="dialog-content"><div class="progress-area"><p-progressBar  [value]="progressbarValue" [showValue]="false" ></p-progressBar></div><div class="progress-label">{{progressbarLabel}}</div></div>
</p-dialog>

import { Component, OnInit, Input } from '@angular/core';@Component({selector: 'app-xxx-progressbar',templateUrl: './xxx-progressbar.component.html',styleUrls: ['./xxx-progressbar.component.css']
})
export class xxxProgressbarComponent implements OnInit {// @Input() progressbarValue: number;//public isDisplay = false;// public progressbarTitle: string;// public progressbarLabel: string;/*** */constructor() { }/*** */ngOnInit() {}/*** * @param title * @param label*/public show(title: string, label: string) {this.progressbarTitle = title;this.progressbarLabel = label;this.isDisplay = true;}/****/public close() {this.isDisplay = false;}
}

AngularJS PrimeNG 上传文件进度条相关推荐

java fileupload 进度_Java上传文件进度条的实现方法(附demo源码下载)
本文实例讲述了Java上传文件进度条的实现方法.分享给大家供大家参考,具体如下: 东西很简单,主要用到commons-fileupload,其中有一个progressListener的接口,该接口可以 ...
java保存图片进度条_Java上传文件进度条的实现方法(附demo源码下载)
本文实例讲述了Java上传文件进度条的实现方法.分享给大家供大家参考,具体如下: 东西很简单,主要用到commons-fileupload,其中有一个progressListener的接口,该接口可以 ...
php flash上传进度条,PHP_PHP+FLASH实现上传文件进度条相关文件下载，PHP之所以很难实现上传进度条 - phpStudy...
PHP+FLASH实现上传文件进度条相关文件下载 PHP之所以很难实现上传进度条是因为在我们上传文件到服务器的时候,要等到文件全部送到服务器之后,才执行相应的php文件.在这之前,文件数据保存在一个 ...
vue实时上传文件进度条
vue实时上传文件进度条 //上传文件组件 <el-uploadaction:show-file-list="false":before-upload="uploa ...
jquery和php上传文件进度条,jQuery实现文件上传进度条特效_jquery
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前 ...
ssm上传文件进度条_SSM框架+Plupload实现分块上传大文件示例
关于Plupload的介绍,相信它的官网http://www.plupload.com/已经给得很详细了.Plupload的上传原理简单点说,就是将用户选中的文件(可多个)分隔成一个个小块,依次向服务 ...
ssm上传文件进度条_Java 单文件、多文件上传 / 实现上传进度条
日常,工作在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传 ...
java ftp 上传文件进度条_java FTP上传文件（进度条显示进度）
java实现FTP上传有2种方式,一种是org.apache.commons.net.ftp.FTPClient这个jar包,一种是sun.net.ftp.FtpClient.不知道为什么,在使用前一 ...
ssm上传文件进度条_ssm学习笔记-三种文件上传方式
首先需要引入commons-fileupload commons-fileupload commons-fileupload 1.3.3 MultipartFile方式示例代码: @RequestM ...

AngularJS PrimeNG 上传文件进度条

AngularJS PrimeNG 上传文件进度条

1.思路：

2.父页面代码实现：

3.子页面代码实现

AngularJS PrimeNG 上传文件进度条相关推荐

最新文章

热门文章

AngularJS PrimeNG 上传文件 进度条

AngularJS PrimeNG 上传文件 进度条

1.思路：

2.父页面代码实现：

3.子页面代码实现

AngularJS PrimeNG 上传文件 进度条相关推荐

最新文章

热门文章

AngularJS PrimeNG 上传文件进度条

AngularJS PrimeNG 上传文件进度条

AngularJS PrimeNG 上传文件进度条相关推荐