从Primefaces p:fileUpload中删除文件上传和取消按钮

Question

我想从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，但我没有设法摆脱它。谢谢。

Answer 1

PrimeFaces 6.x 或更高版本

至少使用以下属性：

<p:fileUpload ... auto="true" skinSimple="true" />

PrimeFaces 4.x/5.x

您只能为此使用 CSS，因为他们删除了 showButtons 属性：

.ui-fileupload-buttonbar .ui-fileupload-upload {
    display: none;
}
.ui-fileupload-buttonbar .ui-fileupload-cancel {
    display: none;
}

当心 CSS 排序规则，另请参阅如何使用自定义样式覆盖默认的 PrimeFaces CSS？

PrimeFaces 3.x 或更早版本

至少使用以下属性：

<p:fileUpload ... auto="true" showButtons="false" />

Answer 2

试试这个：

.ui-fileupload-buttonbar .ui-fileupload-upload {
    display: none;
}
.ui-fileupload-buttonbar .ui-fileupload-cancel {
    display: none;
}

Answer 3

在 angular 中，使用 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'});
    });
  }