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

问题描述

我正在使用DropZone.js

I am using 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方法中输入了一条正常工作的消息。

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.

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

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.

编辑：
DropZone 的服务器端实现

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>

我得到它包括

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

自动形式为
所以我们可以使用 file

如果

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

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

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

正在打印内部图片上传。

It is printing Inside Image upload.

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

How to make access fields of file on Action class.

推荐答案

问题

当你使用

Problem

When you use

<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<字符串> 用于 fileName 和 contentType 。

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.

当您使用 dropzone.js ，相反，文件名将被更改以处理多输入客户端，方法是附加 [] to it：

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

paramName ：传输的文件参数的名称。
默认为文件。 注意：如果您将 uploadMultiple
选项设置为true，则Dropzone将附加 [ ] 到名称。

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

Struts2 doesn't like it at all.

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

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

1. 将 dropzone.js 重命名为 dropzone-struts2.js ;


2. 打开文件并搜索[+ n +]（最新版本中的第866行）



3. 更改此行

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 + "]" : "");

到这一个

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

现在它符合Struts2标准，并且可以正常工作多次上传。

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

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