Question

是否可以阻止/禁用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>

Answer 1

您可以使用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中禁用“选择”按钮，直到上载完成

1 个答案: