有没有办法在高级模式和自动模式下隐藏 Primefaces 文件上传进度条和按钮？答案

【问题标题】：Is there a way to hide the Primefaces fileUpload progress bar and buttons in advanced mode and auto mode?有没有办法在高级模式和自动模式下隐藏 Primefaces 文件上传进度条和按钮？
【发布时间】：2012-10-23 13:54:07
【问题描述】：

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

这是我正在使用的代码：

<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()"/>

问题是每个文件的进度条旁边出现的按钮没有意义，因为模式是自动的，所以上传已经开始了！

这是一个屏幕截图：

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

根据 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>

【讨论】：

【解决方案2】：

对于 PrimeFaces 5，这可能是一个解决方案（使用 atm）

.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 类，你就可以开始了:)

【讨论】：

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

【解决方案3】：

为我工作。 Primefaces 6.0.1

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

【讨论】：

【解决方案4】：

嗯，当我能回答自己的问题时，我喜欢它：

这是更新后的代码：

<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();                        
                }
            }

【讨论】：

好吧，有一个干净的 css 解决方案可以解决您的问题，它可以避免不必要的样式污染您的后端代码。
@akoskm，请在这里分享
@kolossus 当然，请参阅上面的解决方案

【解决方案5】：

在 fileUpload 标记中使用 showButtons="false"。

例如：

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

【讨论】：

PrimeFaces 的当前版本没有这样的属性。