Javascript 具有多个dropzone.js的动态表单

我正在使用jsp创建一个servlet应用程序，该应用程序具有一个带有“对象”的表单。每个对象都有多个输入字段和一个图像上载区域，我选择了dropzone.js作为作业。用户可以添加任意数量的对象，这是通过javascript动态完成的。当您第一次加载表单时，已经有一个在jsp页面中编码的对象

我已经设法对输入框进行了编码，但是图像上传部分给了我一段艰难的时间，我无法让它工作。我的javascript知识很低，我很难理解如何用servlet连接所有DropZone

为了让所有DropZone正常工作，我的javascript应该是什么样子

另一个问题是，我是否应该使用AJAX执行每个dropzone，以便在提交表单时已经上载了图像（我这样想是因为可以有多个对象和多个图片）

不管怎么说，到目前为止，我的情况如下：

JSP/HTML

  <div class="form-group">
  <div class="dropzone" id="image-upload">
    <div class="dz-default dz-message file-dropzone text-center well col-sm-12">
      <span class="glyphicon glyphicon-paperclip"></span> <span>
                                To attach files, drag and drop here</span><br> <span>OR</span><br>
      <span>Just Click</span>
    </div>

    <!-- this is were the previews should be shown. -->
    <div class="dropzone-previews"></div>
  </div>
</div>
</div>
</form>
<div class="text-center">
  <button type="submit" class="btn btn-lg btn-primary" form="primaryform" id="submit-all">Create PDF</button>
</div>

要附加文件，请将其拖放到此处
或

点击
PDF创建

JAVASCRIPT

   Dropzone.options.imageUpload = {
        url: "/generated.jsp",
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100,
        maxFiles: 100,
        acceptedFiles: "image/*",

        init: function () {

            var submitButton = document.querySelector("#submit-all");
            var wrapperThis = this;

            submitButton.addEventListener("click", function () {
                wrapperThis.processQueue();
            });

            this.on("addedfile", function (file) {

                // Create the remove button
                var removeButton = Dropzone.createElement("<button class='btn btn-lg dark'>Remove File</button>");

                // Listen to the click event
                removeButton.addEventListener("click", function (e) {
                    // Make sure the button click doesn't submit the form:
                    e.preventDefault();
                    e.stopPropagation();


                    wrapperThis.removeFile(file);
                });

                // Add the button to the file preview element.
                file.previewElement.appendChild(removeButton);
            });
        }
    };

Dropzone.options.imageUpload={
url:“/generated.jsp”，
自动处理队列：false，
uploadMultiple:true，
并行上传：100，
最大文件数：100，
acceptedFiles:“image/*”，
init：函数（）{
var submitButton=document.querySelector（“全部提交”）；
var wrapperThis=this；
submitButton.addEventListener（“单击”，函数（）{
wrapperThis.processQueue（）；
});
this.on（“addedfile”，函数（文件）{
//创建删除按钮
var removeButton=Dropzone.createElement（“删除文件”）；
//收听单击事件
removeButton.addEventListener（“单击”），函数（e）{
//确保单击按钮不会提交表单：
e、 预防默认值（）；
e、 停止传播（）；
wrapperThis.removeFile（文件）；
});
//将按钮添加到文件预览元素。
file.previewElement.appendChild（removeButton）；
});
}
};

---

提前谢谢

如果可能，请创建一个示例来演示问题。到目前为止，我从Dropzone得到一个JavaScript错误。我将在下面链接到一个可能的答案。可能的重复。嗯，我不知道如何创建一个工作示例。我找不到任何地方有超过一个dropzone的例子，我有一个加上其他程序添加的例子。如果可能，请创建一个来演示这个问题。到目前为止，我从Dropzone得到一个JavaScript错误。我将在下面链接到一个可能的答案。可能的重复。嗯，我不知道如何创建一个工作示例。我找不到任何地方有超过一个dropzone的例子，我有一个加上其他程序添加。