是否可以阻止/禁用 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
和 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>
关于jsf - 如何禁用 PrimeFaces FileUpload 中的“选择”按钮直至上传完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26990406/