Question

在primefaces文件上传中，FileUpload组件本身就是放置区。我想创建多个dropzones，例如，如果用户在任何其他div或表上删除文件，Primefaces文件上传组件应该选择该文件。

我试图为primefaces上传组件手动触发drop事件，但这不起作用。

请帮我解决这个问题。提前谢谢！

这是我尝试过的，

$('.otherdropzone').on( 'dragover', function(e) { e.preventDefault(); } ); 

$('.otherdropzone').on( 'dragenter', function(e) { e.preventDefault(); } );

$(".otherdropzone").on('drop', function(e){ 

    e.preventDefault();
    $(".fileupload-content").trigger('drop',e); // Primefaces dropzone cssclass
});

通过更改Primefaces的触发器和drop zone类的参数，例如.files和.ui-fileupload

，类似的其他事情

Answer 1

诀窍是Primefaces基于下面的插件开发了Fileupload功能。所以，我从那里开始并让它在primefaces中工作

https://github.com/blueimp/jQuery-File-Upload/wiki/API

只需提供id到<p:fileUpload/>标记，例如

<p:fileUpload id="advancedupload" widgetVar="advupload"
              fileUploadListener="#{fileUploadController.handleFileUpload}"
              mode="advanced" dragDropSupport="true" multiple="true"
              update="messages" sizeLimit="10000000" fileLimit="2"
              allowTypes="/(\.|\/)(gif|jpe?g|png|pdf)$/" />

并基于此，它将呈现为HTML5 File Upload component in the browser。

所以，script将是

  $(window).load(function(){
        $('#advancedupload').fileupload({
            dropZone: $(document)
         });
     });

应该{{1}}否则会抱怨在DOM中找不到组件。这就是诀窍。

Answer 2

根据SRy的建议，您可以使用JavaScript自定义dropzone。请记住：

您需要阻止默认的拖放行为

$（document）.bind（＆＃39; drop dragover＆＃39;，function（e）{ e.preventDefault（）; }）;
确保渲染您的组件。在我的例子中，我在bootstrap模式对话框中显示上传拖放区域，这在开头没有显示。因此，我不会在window#load上调用该函数。我在打开模态对话框时调用它。

Primefaces文件上传，在页面中的任何位置删除p：fileUpload之外的文件

2 个答案: