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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了有没有办法在高级模式和自动模式下隐藏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()"/> 

问题是,由于模式是自动的,因此每个文件的进度条旁边显示的按钮没有任何意义,因此上传已经开始!

这是一个屏幕截图:

答案

根据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>
另一答案

对于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-simple组件中使用fileUpload类,你很高兴去:)

另一答案

好吧,当我能回答我自己的问题时,我喜欢它:

这是更新的代码:

<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();                        
                }
            }
另一答案

为我工作。 Primefaces 6.0.1

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

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

例如:

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

以上是关于有没有办法在高级模式和自动模式下隐藏Primefaces fileUpload进度条和按钮?的主要内容,如果未能解决你的问题,请参考以下文章

在全屏模式下隐藏标题?

在 Vim 插入模式下,有没有办法添加文件路径自动完成?

显示 1 秒后自动关闭模式 - swiftui

调试和发布模式下Activity的不同菜单项

[UE4]工程设置:自动捕获鼠标通过代码设置鼠标显示隐藏输入模式编译时自动保存

有没有办法在路由更改时自动关闭 Angular UI Bootstrap 模式?