通过将文件拖到页面的任何位置来上传JSF文件

Question

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

我尝试了这个:

$('.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组件？

Answer 1

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

需要auto="true"才能完成此操作。

更新:

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

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