Question

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

我已设法对输入框进行编码，但图片上传部分给了我一些困难，但我无法使其正常工作。我的javascript知识很低，我很难理解我应该如何将所有dropzones与servlet连接起来。

为了让所有dropzones正常工作，我的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>

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.js的动态表单

0 个答案: