Primefaces文件上传，将文件放在p：fileUpload以外的任何地方 [英] Primefaces File upload, Drop file outside of p:fileUpload anywhere in the page

问题描述

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

我试图手动触发drop事件对于primefaces上传组件，但这是行不通的。

请帮助我。

这是我试过的，

  $ （'.otherdropzone'）。on（'dragover'，function（e）{e.preventDefault（）;}）; （'dragenter'，function（e）{e.preventDefault（）;}）; 
 
 $（'。otherdropzone'）。 （'。drop'，function（e）{
 
 e.preventDefault（）; 
 $（。fileupload （'drop'，e）; // Primefaces dropzone cssclass 
}）; 
  

通过更改Primefaces的触发器和放置区类（例如.files和.ui）的参数-fileupload

解决方案

诀窍是Primefaces开发了基于 Fileupload 在下面的插件。所以，我开始在那里工作在primefaces

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

只要将 id 设为< p：fileUpload />


 < p：fileUpload id =advanceduploadwidgetVar =advupload
 fileUploadListener = ＃{fileUploadController.handleFileUpload}
 mode =advanceddragDropSupport =truemultiple =true
 update =messagessizeLimit =10000000fileLimit =2
 allowTypes = /(\.|\/)(gif|jpe?g|png|pdf)$//> 
  

在此基础上，它将在浏览器中呈现为 HTML5文件上传组件。





因此，脚本将会是

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $' ）
}）;
}）;


应该是 $（window）.load（）


In primefaces file upload, FileUpload component itself is the drop zone. I want to create multiple dropzones, for example if user drops files on any other div or table the Primefaces File upload component should pick that.

I tried to trigger drop event manually for primefaces upload component but this is not working.

Please help me with this. Thanks in advance!

Here is what I tried,

$('.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
}); 

Similar other things by changing arguments for trigger and drop zone class of Primefaces such as .files and .ui-fileupload

解决方案

The trick is Primefaces have developed the Fileupload functionality based on below plugin.So, I started there and got it working in primefaces

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

Just give a id to <p:fileUpload/> tag like

<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)$/" />

and based on this it will render as HTML5 File Upload component in the browser.

So, script will be

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

Should be $(window).load() otherwise it complain about component not found in DOM. That's it does the trick.

这篇关于Primefaces文件上传，将文件放在p：fileUpload以外的任何地方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！