如何使用XMLHttpRequest而不是Dropzone的表单请求发送HTTP请求？

Question

I want to upload files from my computer to the server using DropzoneJS. The documentation says to use a form which includes a URL to post to. However, instead of this I want to get the files in my javascript file so that I can send a XMLHttpRequest to the server and get a response from the same post. The problem is for some reason the Dropzone needs a URL (Even when I put

Dropzone.autoDiscover = false; 

in my Javascript file with the URL, the error is gone but the dropzone isn't able to function). Is there a way to not put the form action url altogether? I do not want to make two different http requests. Here's the form:

<form method="post" enctype="multipart/form-data" id="my-awesome-dropzone" class="dropzone"></form>

Answer 1

Since ie10, it's possible to upload files using XHR2, like this:

if (new XMLHttpRequest().upload) {
  var form = document.getElementById('my-awesome-dropzone');
  var fileSelect = document.getElementById('file-select');
  var uploadButton = document.getElementById('upload-button');
  form.onsubmit = function(event) {
    event.preventDefault();
    // Update button text.
    uploadButton.innerHTML = 'Uploading...';
    // Get the selected files from the input.
    var files = fileSelect.files;
    // Create a new FormData object.
    var formData = new FormData();
    // Loop through each of the selected files.
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      // Add the file to the request.
      formData.append('files[]', file, file.name);
    }
    // Set up the request.
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'handler.php', true);
    xhr.onload = function () {
      if (xhr.status === 200) {
        uploadButton.innerHTML = 'Done';
        var data = xhr.responseText
        // do something with the response

      } else {
        console.log('An error occurred!');
      }
    }
    xhr.onerror = function() {
      console.log('An error occurred!');
    }
    xhr.send(formData);
  }
} else {
  // browser doesn't support JS file uploading
}

Source: http://blog.teamtreehouse.com/uploading-files-ajax