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

我正在使用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); }); } } });

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

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

编辑： DropZone的服务器端实现

Dropzone不提供处理文件的服务器端实现，但文件上传的方式与简单的文件上传表单相同，如下所示：

我得到它包括

自动表单，以便我们可以使用file访问它

如果

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

  public class ImageAction extends ActionSupport { private List file; private List fileContentType; private List 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 }

它正在打印Inside Image上传。

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

问题

当你使用

所有文件都将以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 Interceptor期望接收的正确参数，用于处理List以及fileName和contentType的相关List 。

当你使用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 + "]" : "");

现在它符合Struts2，并且可以使用多个上传。

Interesting Posts