通过将文件拖到页面的任何位置来实现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-component？

Answer 1

你试过了吗dragDropSupport="true"？

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

它对我来说非常有效。