[英]Remove File Upload and Cancel Button from Primefaces p:fileUpload
我想从p:fileUpload中删除上载和取消按钮。 对于“上传”按钮,我尝试过这样的CSS(不同版本):
.ui-fileupload-upload button {
display: none;
}
但它仍然可见。
<button type="button"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-state-disabled ui-fileupload-upload"
disabled="disabled">
<span
class="ui-button-icon-left ui-icon ui-c ui-icon-arrowreturnthick-1-n"></span>
<span class="ui-button-text ui-c">Upload</span>
</button>
我看到了该出版物[链接]( 如何从<p:fileUpload>删除上传取消按钮 ),并再次尝试使用不同的CSS,但是我没有设法摆脱它。 谢谢。
至少使用以下属性:
<p:fileUpload ... auto="true" skinSimple="true" />
您只能为此使用CSS,因为它们删除了showButtons
属性:
.ui-fileupload-buttonbar .ui-fileupload-upload {
display: none;
}
.ui-fileupload-buttonbar .ui-fileupload-cancel {
display: none;
}
提防CSS排序规则,另请参见如何使用自定义样式覆盖默认的PrimeFaces CSS?
至少使用以下属性:
<p:fileUpload ... auto="true" showButtons="false" />
尝试这个:
.ui-fileupload-buttonbar .ui-fileupload-upload {
display: none;
}
.ui-fileupload-buttonbar .ui-fileupload-cancel {
display: none;
}
在ng2-file-upload
,使用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'});
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.