通过将文件拖动到页面中的任意位置来上传 JSF 文件 [重复]答案

【问题标题】：JSF fileupload by dragging file anywhere into the page [duplicate]通过将文件拖动到页面中的任意位置来上传 JSF 文件 [重复]
【发布时间】：2016-10-18 09:40:25
【问题描述】：

我目前正在使用 Primefaces 文件上传组件的拖放功能。它工作正常，但我想要的是直接通过将文件拖动到我的页面中的任何位置来上传文件，而无需单击按钮。

我试过了：

$('.dropzone').on({
    'dragover dragenter': function (e) {
        e.preventDefault();
        e.stopPropagation();
    },
    'drop': function (e) {
        var dataTransfer = e.originalEvent.dataTransfer;
        if (dataTransfer && dataTransfer.files.length) {
            e.preventDefault();
            e.stopPropagation();
            $.each(dataTransfer.files, function (i, file) {

              uploadFile([{"name": "filename", "value": file.name}]);
            });
        }
    }
});

<p:remoteCommand name="uploadFile" action="#{bean.uploadFile()}" />

public void uploadFile(){
   String filename = 
       FacesContext.getCurrentInstance()
       .getExternalContext().getRequestParameterMap().get("filename");
}

问题是这适用于文件名，但不适用于文件本身。无论如何这是正确的方法还是有办法将files 列表转发到 Primefaces fileUpload 并在不使用 gui 组件的情况下以编程方式提交文件？

【问题讨论】：

你以前试过这个SO answer吗？
是的，但它不起作用。我不确定这个解决方案是否仍然适用于 Primefaces 6.0。
我不确定它是否满足您的需求，但有这个东西：Dropzone
stackoverflow.com/q/38018632 确实应该完全回答您的问题。这是真的？上面sunofkyuss的评论中提到了，但您没有对此发表任何反馈。
我还没有机会测试它，但答案看起来很有希望。

标签： jsf file-upload primefaces

【解决方案1】：

它已经在陈列柜中了。 http://www.primefaces.org/showcase/ui/file/upload/auto.xhtml

需要auto="true" 才能完成这项工作。

更新：

在渲染文件上传 div 后执行以下 javascript。然后，您可以将允许的文件类型拖放到页面中的任何位置。

$('.ui-fileupload').fileupload({
      dropZone: $(document)
});

【讨论】：

这没有回答 “我想要的是通过将文件拖到我的页面的任何位置来直接上传文件”
呃，问题说明了这一点。在发布答案/评论之前尝试阅读问题（以及所有 cmets 和其他答案）。
InputStream in = FileUploadEvent.getInputStream(); 将有一个指向文件的指针
OP 已经知道这一切。 OP 只是希望能够通过将文件拖到页面中anywhere 来上传文件，而不是只拖到<p:fileUpload> 框中。在问题的 cmets 中，您可以找到另一个 Q&A 的链接，该问答已经回答了这个问题。
更新了答案。现在可以将它们任何地方放到页面中并对其进行测试。如果这不起作用，对不起，我能做的只有这些。

【解决方案2】：

你试过dragDropSupport="true"吗？

<p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}" mode="advanced" dragDropSupport="true"
                      update="messages" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />

对我来说效果很好。

【讨论】：

这没有回答 “我想要的是通过将文件拖到我的页面的任何位置来直接上传文件”