使用Dropzone.js在Struts2中上传多个文件

时间:2014-09-26 10:44:53

标签: java jquery jsp struts2 dropzone.js

我正在使用DropZone.js

我的配置是

Dropzone.options.myAwesomeDropzone = {
                        url: 'UploadImages',
                        previewsContainer: ".dropzone-previews",
                        uploadMultiple: true,
                        parallelUploads: 5,
                        maxFiles: 20,
                        addRemoveLinks: true,
                        init: function() {
                            this.on("success", function(file, response) {
                                $('.dz-progress').hide();
                                console.log(response);
                                console.log(file);
                            });
                        }
                    }
                });

此代码与我的本地主机完美配合。 我正在将文件上传到UploadImages网址。 我在该url方法中输入了一条正常工作的消息。

我的问题是我没有得到我应该使用哪个名称来获取服务器中的内容。 就像我的服务器端实现中应该访问的imageFile变量,imageName变量,imageContent类型的名称一样。

修改: DropZone

的服务器端实现

Dropzone不提供处理文件的服务器端实现,但上传文件的方式与简单的文件上传表单完全相同:

<form action="" method="post" enctype="multipart/form-data">
  <input type="file" name="file" />
</form>

我得到了包括

<input type="file" name="file" /> 

自动表格 所以我们可以使用file

访问它

如果

<input name="file" type="file" multiple />

然后我们可以使用file[]访问它 在服务器端我试过

  public class ImageAction extends ActionSupport {
         private List<File> file;
         private List<String> fileContentType;
         private List<String> fileFileName;

         System.out.println("Inside Image upload ");
        System.out.print("\n\n---------------------------------------\n");
        int i = 0;
        for (File f : file) {
            System.out.print("\nFile [" + i + "] ");
            System.out.print(" length: " + f.length());
            System.out.print(" name:" + getFileFileName().get(i));
            System.out.print(" contentType: " + getFileContentType().get(i));

            i++;
        }
        System.out.println("\n---------------------------------------\n");
       }
       //getter setter  
       }

正在打印内部图片上传。

如何在Action类上创建文件的访问字段。

1 个答案:

答案 0 :(得分:3)

问题

使用时

<input type="file" name="file" multiple /> 

文件将全部与name="file"一起发送,例如:

Content-Disposition: form-data; name="file"; filename="foo.jpg"
Content-Type: image/jpeg
...........
. ...
.......
Content-Disposition: form-data; name="file"; filename="bar.jpg"
Content-Type: image/jpeg
....
.
..
.......

这是Struts2 FileUpload拦截器希望接收的正确参数,使用List<File>以及 fileName contentType List<String> EM>

当您使用dropzone.js时,文件名将被更改以处理多输入客户端,方法是向其添加[]

  

paramName:传输的文件参数的名称。   默认为文件。 注意如果您选择uploadMultiple   设置为true,然后Dropzone会将[]附加到名称。

例如。

Content-Disposition: form-data; name="file[0]"; filename="foo.jpg"
Content-Type: image/jpeg
...........
. ...
.......
Content-Disposition: form-data; name="file[1]"; filename="bar.jpg"
Content-Type: image/jpeg
....
.
..
.......

Struts2根本不喜欢它。

解决方案

不要乱用自定义拦截器和转换器,而是对用于Struts2项目的dropzone.js库进行简单调整:

  1. 将您的dropzone.js重命名为dropzone-struts2.js;
  2. 打开文件并搜索"[" + n + "]"(最新版本中的第866行)
  3. 更改此行

    return "" + this.options.paramName + (this.options.uploadMultiple ? "[" + n + "]" : "");
    

    到这个

    return "" + this.options.paramName; //+ (this.options.uploadMultiple ? "[" + n + "]" : "");
    
  4. 现在它符合Struts2,并且可以使用多个上传。