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

Question

我正在使用 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。我在该 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 类上创建文件的访问字段。

Answer 1

问题

当你使用

<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 Interceptor 期望接收的正确参数，与 List<File> 一起工作和相关的List<String> fileName 和 contentType。

当您使用 dropzone.js 时，而是通过附加 [] 来更改文件名以处理多输入客户端。对它:

paramName: The name of the file param that gets transferred. Defaults to file. NOTE: If you have the option uploadMultiple set to true, then Dropzone will append [] to the name.

例如。

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 根本不喜欢它。

解决方案

与其搞乱自定义拦截器和转换器，不如对 dropzone.js 做一个简单的调整您用于 Struts2 项目的库:

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 兼容，并且可以处理多个上传。