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

在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基于下面的插件开发了Fileuploadfunction。所以，我从那里开始并让它在primefaces工作

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

只需给标签一个id

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

所以， script将是

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

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

Answer 2

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

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

   $（document）.bind（’drop dragover’，function（e）{e.preventDefault（）;}）;

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