javascript - dropzone 阻止单击按钮时提交表单

Question

我在页面中使用 dropzone，如下所示(表单文本上还有其他输入类型并选择下拉菜单):

<form name="somename" method="post" action="/gotoURL" form="role">
   // Other form elements here
       <div id="droparea">
                            <div id="actions" class="row">
                              <div class="col-lg-7">
                                <!-- The fileinput-button span is used to style the file input field as button -->
                                <span class="btn btn-success fileinput-button">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    <span>Add files...</span>
                                </span>
                                <button type="submit" class="btn btn-primary start">
                                    <i class="glyphicon glyphicon-upload"></i>
                                    <span>Start upload</span>
                                </button>
                                <button type="reset" class="btn btn-red cancel">
                                    <i class="glyphicon glyphicon-ban-circle"></i>
                                    <span>Cancel upload</span>
                                </button>
                              </div>
                              <div class="col-lg-5">
                                <!-- The global file processing state -->
                                <span class="fileupload-process">
                                  <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                    <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                  </div>
                                </span>
                              </div>
                            </div>

                            <div class="table table-striped files" id="previews">
                              <div id="template" class="file-row">
                                <!-- This is used as the file preview template -->
                                <div>
                                    <span class="preview"><img data-dz-thumbnail /></span>
                                </div>
                                <div>
                                    <p class="name" data-dz-name></p>
                                    <strong class="error text-danger" data-dz-errormessage></strong>
                                </div>
                                <div>
                                    <p class="size" data-dz-size></p>
                                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                      <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                    </div>
                                </div>
                                <div>
                                  <button class="btn btn-primary start">
                                      <i class="glyphicon glyphicon-upload"></i>
                                      <span>Start</span>
                                  </button>
                                  <button data-dz-remove class="btn btn-red cancel">
                                      <i class="glyphicon glyphicon-ban-circle"></i>
                                      <span>Cancel</span>
                                  </button>
                                  <button data-dz-remove class="btn btn-red delete">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    <span>Delete</span>
                                  </button>
                                </div>
                              </div>
                            </div>  <!-- end action -->
                        </div> <!-- end droparea -->

然后我有一个表单的提交按钮，如下所示:

<button name="appbut" class="btn btn-primary" type="submit">SEND NOW</button>

问题在于，拖放区工作得很好，但每次单击拖放区内的按钮时，都会提交完整的表单，这意味着页面会重新加载，并且任何文本区域、输入框中的所有数据都会丢失。

我网站的另一个页面上的拖放区没有封装在表单中，并且调用 AJAX 函数可以正常工作，所以我猜测这与表单有关？

这是我的 dropzone ajax 代码:

 // Get the template HTML and remove it from the doument
  var previewNode = document.querySelector("#template");
  previewNode.id = "";
  var previewTemplate = previewNode.parentNode.innerHTML;
  previewNode.parentNode.removeChild(previewNode);

  var myDropzone = new Dropzone("#droparea", { // Make the whole body a dropzone
    url: "/upload-cv2.php", // Set the url
    maxFiles: 1,
    maxFilesize: 1,
    acceptedFiles: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document , application/docx, application/pdf, text/plain, application/msword',
    init: function() {
    this.on("success", function(file, responseText) {
        console.log(responseText);
    });
    },
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
  });

  myDropzone.on("addedfile", function(file) {
    // Hookup the start button
    file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
  });

  // Update the total progress bar
  myDropzone.on("totaluploadprogress", function(progress) {
    document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
  });

  myDropzone.on("sending", function(file) {
    // Show the total progress bar when upload starts
    document.querySelector("#total-progress").style.opacity = "1";
    // And disable the start button
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
  });

  // Hide the total progress bar when nothing's uploading anymore
  myDropzone.on("queuecomplete", function(progress) {
    document.querySelector("#total-progress").style.opacity = "0";
  });

  // Setup the buttons for all transfers
  // The "add files" button doesn't need to be setup because the config
  // `clickable` has already been specified.
  document.querySelector("#actions .start").onclick = function() {
    myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
  };
  document.querySelector("#actions .cancel").onclick = function() {
    myDropzone.removeAllFiles(true);
  };

我不希望每次使用 dropzone 时都提交表单。

Answer 1

更改:

document.querySelector("#actions .start").onclick = function()    {               myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
  };
  document.querySelector("#actions .cancel").onclick = function() {
    myDropzone.removeAllFiles(true);
  };

至

 document.querySelector("#actions .start").onclick = function(e) {
    e.preventDefault();
   myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
  };
  document.querySelector("#actions .cancel").onclick = function(e) {
    e.preventDefault();
    myDropzone.removeAllFiles(true);
  };