如何禁用PrimeFaces FileUpload中的“选择"按钮,直到上传完成 [英] How to disable Choose button in PrimeFaces FileUpload until the upload is complete
问题描述
是否可以阻止/禁用FileUpload中的选择"按钮?
Is it possible to block/disable the "Choose" button in FileUpload?
我在高级模式下使用p:fileUpload并设置了multiple ="true".如果我单击上传"按钮开始所有文件的上传,那么我想在所有文件都上传完之前阻止添加更多文件.
I use the p:fileUpload in advanced mode and set multiple="true". If I click on the Upload button to start the upload of all file, I want to prevent the adding of more files until all files are uploaded.
PrimeFaces的版本为5.1.
Version of PrimeFaces is 5.1.
p:fileUpload的定义:
Definition of 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代码.
Workaround with p:blockUI
I found a workaround with using of blockUI element. So on start the blockUI is show and after all uploads are completed the blockUI is hide. For that javascript code is needed.
<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代码:
Javascript Code:
<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
和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>
这篇关于如何禁用PrimeFaces FileUpload中的“选择"按钮,直到上传完成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!