有没有办法在高级模式和自动模式下隐藏Primefaces fileUpload进度条和按钮？

有没有办法在高级模式和自动模式下隐藏Primefaces fileUpload进度条和按钮？有没有办法在高级模式和自动模式下隐藏Primefaces fileUpload进度条和按钮？

这里是我使用的代码：

<p:fileUpload id="scriptUpload" 
         widgetVar="importDevicesWidget" 
         fileUploadListener="#{scriptUploadBean.handleFileUpload}" 
         auto="true" 
         label="Choose.." 
         mode="advanced" 
         update=":infoMessages" 
         sizeLimit="8192" 
         allowTypes="/(\.|\/)(txt)$/" 
         onstart="clearInvalidFileMsg();$('#progress').show();" 
         oncomplete="clearInvalidFileMsg();$('#progress').hide();importDevicesDialogWidget.hide()"/>

的问题是，它没有任何意义的旁边显示进度条为每个文件在那里的模式是auto，这样的按钮上传已经开始！

这里是一个屏幕截图：

enter image description here

来源

2012-11-02 jrobertsz66

按照3.4文档.ui-fileupload .start，.ui-fileupload .cancel和.ui-fileupload .progress选择您的文件上传开始，取消和进度条：

<style type="text/css"> 
    .ui-fileupload .start { 
     display: none; 
    } 
    .ui-fileupload .cancel { 
     display: none; 
    } 
    .ui-fileupload .progress { 
     display: none; 
    } 
</style>

来源

2012-11-03 10:58:12

嗯，我喜欢它，当我可以回答我的问题：

下面是更新后的代码：

<p:dialog appendToBody="true" id="importDevices" widgetVar="importDevicesDialogWidget" header="Import Devices" resizable="false" modal="true" onShow="centerDialog('#importDevicesDialog');"> 
      <h:form id="importDevicesForm" enctype="multipart/form-data"> 
       <h:panelGrid columns="1" cellpadding="5"> 
        <p:fileUpload id="scriptUpload" 
         widgetVar="importDevicesWidget" 
         fileUploadListener="#{scriptUploadBean.handleFileUpload}" 
         auto="true" 
         label="Choose.." 
         mode="advanced" 
         update=":infoMessages" 
         sizeLimit="8192" 
         allowTypes="/(\.|\/)(txt)$/" 
         onstart="clearInvalidFileMsg();$('#progress').show();" 
         oncomplete="clearInvalidFileMsg();$('#progress').hide();importDevicesDialogWidget.hide()"/> 
        <p:spacer height="10px;"/> 
        <p:commandButton value="Cancel" action="javascript.void(0);" onclick="clearInvalidFileMsg();importDevicesDialogWidget.hide();"/> 
       </h:panelGrid> 
      </h:form> 
     </p:dialog>

而且这里是隐藏进度条和按钮并更清除错误的更新函数：

function clearInvalidFileMsg(){ 
       if ($("#importDevicesForm").is(':visible')){ 
        importDevicesWidget.uploadContent.find("tr.ui-state-error").remove(); 
        importDevicesWidget.uploadContent.find("td.progress").remove(); 
        importDevicesWidget.uploadContent.find("td.start").remove(); 
        importDevicesWidget.uploadContent.find("td.cancel").remove();       
       } 
      }

来源

2012-11-02 21:30:13 jrobertsz66

很好，对于你的问题与造型的东西避免你的后端代码不必要的污染清洁的CSS的解决方案。 –

@akoskm，请在此分享 – kolossus

@kolossus肯定，看到我上面的解决方案 –

对于PrimeFaces 5这可能是一个溶液（使用它大气压）

.fileupload-simple > .ui-fileupload-content { 
    display: none; 
} 
.fileupload-simple > .ui-fileupload-buttonbar { 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
}

然后在你的fileUpload组件中使用fileupload-simple类，你很好去:)

来源

2014-08-06 16:10:25 Simego

这取决于模式 - 例如，使用mode =“advance”，类将是fileupload-files –

适合我。 Primefaces 6.0.1

<style type="text/css"> 
    .ui-fileupload-content .ui-progressbar { 
    width: 0px; 
    height: 0px; 
    margin: 0 
    } 
    </style>

来源

2016-08-01 11:06:13 slmkrnz

在fileUpload标记中使用showButtons =“false”。

如：

<p:fileUpload \t id="fileUpload" mode="advanced" \t dragDropSupport="false" \t update="@form" sizeLimit="100000" \t fileLimit="3" allowTypes="/(\.|\/)(xlsx|xls)$/" \t multiple="false" label="Select File" showButtons="false"/>

来源

2017-12-18 14:31:13

这在PrimeFaces 4.0中不起作用 – Kukeltje

有没有办法在高级模式和自动模式下隐藏Primefaces fileUpload进度条和按钮？

回答

相关问题