隐藏上传按钮 PrimeNG
Hide upload button PrimeNG
我正在使用 PrimeNG 上传文件:
https://www.primefaces.org/primeng/#/fileupload
现在,我有这个
但我只想使用 "Choose" 和 "Cancel" 按钮。
所以在 primeNG 网站上,他们说使用 showUploadButton="false"
但是没用。
参考这个post:
Remove File Upload and Cancel Button from Primefaces p:fileUpload
我试过了:
<p-fileUpload ... showButtons="false" showCancelButton="true"/>
然后我试了
.ui-fileupload-buttonbar .ui-fileupload-upload {
display: none;
}
没有任何效果。
也许是因为它指的是另一个版本。
我使用的是 primeNG 2.0.6 和 angular 2.4.0
版本
你试过这样做吗:
<p:fileUpload ... [showButtons]="false" [showCancelButton]="true"/>
希望对你有帮助
您必须将 showUploadButton 放在括号内才能使用。
<p-fileUpload [showUploadButton]="false"></p-fileUpload>
Result
编辑:您需要获取最新版本的 PrimeNG 才能使用 Angular 4。自从 Angular 推出了他们的 Angular 4 以来,PrimeNG 也推出了 PrimeNG v4 以使用Angular 4
对我有用的唯一解决方案是用 css 隐藏它:
.ui-fileupload-buttonbar button:nth-child(2){
display:none;
}
使用 ng2-file-upload
中的 FileUploader
,在 .html
中:
<tr *ngFor="let item of uploader.queue let i = index">
<td>
<div *ngIf= "!uploader.queue[i].isUploaded">
<button type="button" class="btn btn-success btn-xs" style="margin:2px" (click)="onSubmit(i,item,$event.target)" >
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
</div>
</td>
</tr>
在component.ts
public index:number ;
public onFileSelected() {
this.uploader.queue[this.index].isUploaded=false; // initializing uploaded to false
}
public onSubmit(index:number){
this.uploadService.uploadFile(this.csvJsonData).subscribe((responseData)=>{
this.onSubmitresponse = responseData ;
if(this.onSubmitresponse.status==201){
this.uploader.queue[index].progress = 100;
this.toastrService.success('The File has been uploaded successfully !',this.onSubmitresponse.status,{positionClass:'toast-bottom-center'});
this.uploader.queue[index].isUploaded=true;// will hide the upload button
}
else this.toastrService.error(this.onSubmitresponse.errorMessage,this.onSubmitresponse.status,{positionClass:'toast-bottom-center'});
});
}
[showUploadButton]="false" [showCancelButton]="false"
要隐藏 BUTTONBAR:
::ng-deep .p-fileupload .p-fileupload-buttonbar {
display:none;
}
隐藏内容文件:
::ng-deep .p-fileupload .p-fileupload-content {
display:none;
}
我正在使用 PrimeNG 上传文件: https://www.primefaces.org/primeng/#/fileupload
现在,我有这个
但我只想使用 "Choose" 和 "Cancel" 按钮。
所以在 primeNG 网站上,他们说使用 showUploadButton="false"
但是没用。
参考这个post: Remove File Upload and Cancel Button from Primefaces p:fileUpload
我试过了:
<p-fileUpload ... showButtons="false" showCancelButton="true"/>
然后我试了
.ui-fileupload-buttonbar .ui-fileupload-upload {
display: none;
}
没有任何效果。 也许是因为它指的是另一个版本。 我使用的是 primeNG 2.0.6 和 angular 2.4.0
版本你试过这样做吗:
<p:fileUpload ... [showButtons]="false" [showCancelButton]="true"/>
希望对你有帮助
您必须将 showUploadButton 放在括号内才能使用。
<p-fileUpload [showUploadButton]="false"></p-fileUpload>
Result
编辑:您需要获取最新版本的 PrimeNG 才能使用 Angular 4。自从 Angular 推出了他们的 Angular 4 以来,PrimeNG 也推出了 PrimeNG v4 以使用Angular 4
对我有用的唯一解决方案是用 css 隐藏它:
.ui-fileupload-buttonbar button:nth-child(2){
display:none;
}
使用 ng2-file-upload
中的 FileUploader
,在 .html
中:
<tr *ngFor="let item of uploader.queue let i = index">
<td>
<div *ngIf= "!uploader.queue[i].isUploaded">
<button type="button" class="btn btn-success btn-xs" style="margin:2px" (click)="onSubmit(i,item,$event.target)" >
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
</div>
</td>
</tr>
在component.ts
public index:number ;
public onFileSelected() {
this.uploader.queue[this.index].isUploaded=false; // initializing uploaded to false
}
public onSubmit(index:number){
this.uploadService.uploadFile(this.csvJsonData).subscribe((responseData)=>{
this.onSubmitresponse = responseData ;
if(this.onSubmitresponse.status==201){
this.uploader.queue[index].progress = 100;
this.toastrService.success('The File has been uploaded successfully !',this.onSubmitresponse.status,{positionClass:'toast-bottom-center'});
this.uploader.queue[index].isUploaded=true;// will hide the upload button
}
else this.toastrService.error(this.onSubmitresponse.errorMessage,this.onSubmitresponse.status,{positionClass:'toast-bottom-center'});
});
}
[showUploadButton]="false" [showCancelButton]="false"
要隐藏 BUTTONBAR:
::ng-deep .p-fileupload .p-fileupload-buttonbar {
display:none;
}
隐藏内容文件:
::ng-deep .p-fileupload .p-fileupload-content {
display:none;
}