有没有办法在高级模式和自动模式下隐藏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进度条和按钮?的主要内容,如果未能解决你的问题,请参考以下文章