使用 Dropzone.js 在 Struts2 中上传多个文件 [英] Upload multiple files in Struts2 with Dropzone.js

问题描述

我正在使用 DropZone.js

我的配置是

Dropzone.options.myAwesomeDropzone = {网址:'上传图片'，previewsContainer: ".dropzone-previews",上传倍数:真，并行上传: 5,最大文件:20，addRemoveLinks: 真,初始化:函数(){this.on(成功"，函数(文件，响应){$('.dz-progress').hide();控制台日志(响应)；控制台日志(文件)；});}}});

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

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

DropZone

的服务器端实现

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

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

我知道它包括

自动形成所以我们可以使用 file

访问它

如果

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

 public class ImageAction extends ActionSupport {私人列表<文件>文件;私人列表<字符串>文件内容类型；私人列表<字符串>文件文件名；System.out.println("上传内图");System.out.print("

--------------------------------------
");int i = 0;for (文件 f : 文件) {System.out.print("
File [" + i + "] ");System.out.print(" 长度:" + f.length());System.out.print(" name:" + getFileFileName().get(i));System.out.print(" contentType: " + getFileContentType().get(i));我++;}System.out.println("
--------------------------------------
");}//getter setter}

正在打印内图上传.

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

解决方案

问题

当你使用

文件将全部以name="file"发送，例如:

<块引用>

Content-Disposition: form-data;名称=文件"；文件名=foo.jpg"内容类型:图像/jpeg…………..........内容配置:表单数据；名称=文件"；文件名=bar.jpg"内容类型:图像/jpeg.............

这是 Struts2 FileUpload Interceptor 期望接收的正确参数，用于处理 List 和相关的 List for 文件名 和内容类型.

当您使用 dropzone.js 时，文件名将被更改以处理多个输入客户端，通过将 [] 附加到它:

<块引用>

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

例如.

<块引用>

Content-Disposition: form-data;名称=文件[0]"；文件名=foo.jpg"内容类型:图像/jpeg…………..........内容配置:表单数据；名称=文件[1]"；文件名=bar.jpg"内容类型:图像/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 兼容，并且可以处理多个上传.

I am using DropZone.js

My configuration is

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);
                            });
                        }
                    }
                });

This code is working perfectly with my local host. I am uploading files to UploadImages url. I have entered one message in that url method that is working properly.

My problem is I am not getting which name should i use to get the content in server. Like what is name of imageFile variable, imageName variable, imageContent Type that should i access in my server side implementation.

Edit : Server side implementation of DropZone

Dropzone does not provide the server side implementation of handling the files, but the way files are uploaded is identical to simple file upload forms like this:

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

I got it includes

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

automatically in form so we can access it using file

If

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

then we can access it using file[] in server side I tried

  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("

---------------------------------------
");
        int i = 0;
        for (File f : file) {
            System.out.print("
File [" + 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("
---------------------------------------
");
       }
       //getter setter  
       }

It is printing Inside Image upload.

How to make access fields of file on Action class.

解决方案

Problem

When you use

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

the files will all be sent with name="file", eg:

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
....
.
..
.......

and this is the right parameter Struts2 FileUpload Interceptor is expecting to receive, to work with a List<File> and the related List<String> for fileName and contentType.

When you use dropzone.js, instead, the filename will be altered to handle the multiple input client-side, by appending [] to it:

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.

eg.

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 doesn't like it at all.

Solution

Instead of messing with custom Interceptors and Converters, do a simple adjustment on the dropzone.js library you use for your Struts2 projects:

1. Rename your dropzone.js to dropzone-struts2.js;
2. Open the file and search "[" + n + "]" (line 866 in latest version)

3. Change this line

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

   to this one

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

Now it is Struts2 compliant, and will work with multiple uploads.

这篇关于使用 Dropzone.js 在 Struts2 中上传多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！