3

在 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）来进行类似的其他操作

4

2 回答 2

3

诀窍是 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 中找不到组件。这就是它的伎俩。

于 2013-11-05T18:44:51.060 回答
2

正如 SRy 所建议的，您可以使用 JavaScript 自定义 dropzone。记住：

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

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

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

于 2017-03-13T15:22:33.503 回答