Primefaces 文件上传，将文件放到 p:fileUpload 之外的页面任意位置

Question

在 primefaces 文件上传中，FileUpload 组件本身就是放置区。我想创建多个放置区，例如，如果用户将文件放置在任何其他 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 的触发器和放置区域类的参数（例如 .files 和 .ui-fileupload）来实现类似的其他事情

Answer 1

按照 SRy 的建议，您可以使用 JavaScript 自定义放置区。请记住：

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

   $(document).bind('drop dragover', function (e) { e.preventDefault(); });

2. 确保您的组件已呈现。在我的例子中，我在引导模式对话框中显示了上传拖放区域，这在开头没有显示。因此，我不调用window#load 上的函数。我在打开模态对话框时调用它。

Answer 2

诀窍是 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)
         });
     });  

应该是$(window).load() 否则它会抱怨在 DOM 中找不到组件。这就是它的伎俩。