是否可以阻止/禁用 FileUpload 中的“选择”按钮?
我在高级模式下使用 p:fileUpload 并设置 multiple="true"。如果我单击“上传”按钮开始上传所有文件,我想阻止添加更多文件,直到所有文件上传完毕。
PrimeFaces 的版本是 5.1。
p:fileUpload 的定义:
<p:fileUpload id="fileUpload" update=":form:uploadTable :msg :msgs" fileUploadListener="#{fileUploadBean.handleFileUpload}" mode="advanced" dragDropSupport="false"
multiple="true" sizeLimit="3221225472" fileLimit="100" style="margin:15px 0px;width:900px;" />
p:blockUI 的解决方法
我找到了使用 blockUI 元素的解决方法。因此,在启动时,blockUI 会显示,所有上传完成后,blockUI 会隐藏。为此需要 javascript 代码。
<p:fileUpload id="fileUpload" update=":form:uploadTable :msg :msgs" fileUploadListener="#{fileUploadBean.handleFileUpload}" mode="advanced" dragDropSupport="false"
multiple="true" sizeLimit="3221225472" fileLimit="100" style="margin:15px 0px;width:900px;"
onstart="setUploadFilesCount()" oncomplete="handleUploadComplete()" />
<p:blockUI block="fileUpload" widgetVar="wVarBFileUpload" />
JavaScript 代码:
<script type="text/javascript">
var fileCounter;
var numberOfFiles;
function setUploadFilesCount() {
PF('wVarBFileUpload').show();
fileCounter = 0;
numberOfFiles = $('.ui-fileupload-preview').size();
}
function handleUploadComplete() {
fileCounter++;
if(fileCounter == numberOfFiles) {
PF('wVarBFileUpload').hide();
}
}
</script>
您可以使用onstart
and oncomplete
为了达成这个:
<p:fileUpload onstart="disableChoosing()"
oncomplete="enableChoosing()"
widgetVar="uploadWV"/>
<script>
function disableChoosing() {
PF('uploadWV').disableButton(PF('uploadWV').chooseButton);
PF('uploadWV').chooseButton.find('input[type="file"]').attr('disabled', 'disabled');
}
function enableChoosing() {
if(!PF('uploadWV').files.length) {
PF('uploadWV').enableButton(PF('uploadWV').chooseButton);
PF('uploadWV').chooseButton.find('input[type="file"]').removeAttr('disabled');
}
}
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)