Primefaces上传，如何在提前模式下只允许一次上传答案

【问题标题】：Primefaces upload, how to only allow one upload in advance modePrimefaces上传，如何在提前模式下只允许一次上传
【发布时间】：2013-01-30 15:02:56
【问题描述】：

我想知道是否可能，通过使用primefaces提前上传模式来限制用户只上传一个文件，目前我有：

 <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
                                  mode="advanced" 
                                  multiple="false" 
                                  update="messages"
                                  sizeLimit="100000000" 
                                  allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|txt|pdf)$/"
                                  auto="false"/>


                    <p:growl id="messages" showDetail="true"/>

如您所见，我有多个 ="false" 但用户仍然能够上传多个文件，有什么提示吗？

编辑：

                <p:fileUpload widgetVar="upload" fileUploadListener="#{fileUploadController.handleFileUpload}"
                              mode="advanced" 
                              multiple="false" 
                              update="messages"
                              label="Select File"
                              sizeLimit="100000000" 
                              allowTypes="/(\.|\/)(gif|jpe?g|png|doc|docx|txt|pdf|html)$/"
                              auto="false"/>


                <p:growl id="messages" showDetail="true"/>

在上面添加了 widgetVar

在我的 js 中

<script type="text/javascript"> 
        function Naviagtion()
        {
            //alert("Sent to the printing holding queue, you may close this app now, your work will still print out ");
            window.setTimeout(afterDelay, 500);
            location.href = 'FilesUploaded.xhtml';

        }

        upload.buttonBar.find('input[type=file]').change(function() {
            if (this.value) {
                var files = upload.uploadContent.find('.files tr');

                if (files.length > 1) {
                    files.get(0).remove();
                }
            }
        });
    </script>

但我仍然可以多次上传，我是否朝着正确的方向前进

【问题讨论】：

标签： jsf file-upload primefaces

【解决方案1】：

虽然解决它的更好行为应该是 @BalusC 建议的，但在 primefaces 4.0 我看到了属性

fileLimit="1"

您可以将其设置为 1 以禁止使用“选择”按钮添加多个文件。当用户添加更多文件时，它只是说

“超过最大文件数”

【讨论】：

好收获。这是 Primefaces 4 或更高版本的正确解决方案。

【解决方案2】：

multiple="false" 仅告诉网络浏览器在特定于浏览器的浏览对话框中禁用多文件选择。但是，它确实不妨碍最终用户多次单击 PrimeFaces 文件上传部分的选择按钮来多次浏览和添加单个文件。

您最好的选择是引入一些 JS/jQuery 以在选择新文件时删除所有以前选择的文件。如果你给了你的<p:fileUpload>widgetVar="upload"，那么应该这样做：

$(document).ready(function() {
    upload.buttonBar.find('input[type=file]').change(function() {
        if (this.value) {
            var files = upload.uploadContent.find('.files tr');

            if (files.length > 1) {
                files.get(0).remove();
            }
        }
    });
});

在 PrimeFaces 3.5 上为我工作。

【讨论】：

你能看一下我的编辑吗，我这样做的方法是否正确？谢谢
JS代码示例中的变量名upload由组件的widgetVar属性指定。在您的特定情况下，您将其命名为widgetVar，因此您应该将JS代码示例中的upload替换为widgetVar（并注意浏览器的内置JS控制台，您会注意到JS语法错误比如“参考错误：widgetVar 没有定义”）。
谢谢，我已将名称更改为upload，在浏览器控制台中我有Uncaught ReferenceError: upload is not defined index.xhtml:76 (anonymous function)
如前所述，您需要在文档准备好期间对其进行初始化。如果您还没有使用它，请将此代码放入$(document).ready(function() { ... });。我更新了答案。
我认为 files.get(0).remove() 应该是 $(files.get(0)).remove();

【解决方案3】：

如果您将文件限制设置为 1 并且在文件加载时发生了一些错误 - 您必须刷新页面才能再次进行文件上传工作。如果您不刷新页面，则会收到超出限制的错误消息。

我使用 JS 解决方案，就像在接受的答案中一样，但必须更改选择器，因为 wigetWar 不适合我。

在我看来，我有：

<p:fileUpload id="objectUpload"... />

在我的 portlet 主题中，带有文件的表的 css 类为“ui-fileupload-files”。

$(document).ready(function() {
  $("div[id*='objectUpload']").find('input[type=file]').change(function() {

    if (this.value) {
        var files = $("div[id*='objectUpload']").find('.uifileupload-files tr');        
        if (files.length > 1) {     
            files.get(0).remove();
        }
    }
  });
});

希望对您有所帮助。我使用的是 PrimeFaces 6.0

【讨论】：