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

Question

我想使用DropzoneJS将文件从计算机上载到服务器。 该文档说要使用包含要发布到的URL的表单。 但是，相反，我想获取我的javascript文件中的文件，以便可以将XMLHttpRequest发送到服务器并从同一帖子中获取响应。 问题是由于某些原因，Dropzone需要一个URL（即使我放了

Dropzone.autoDiscover = false; 

在带有URL的Javascript文件中，错误消失了，但dropzone无法运行）。 有没有办法不完全将表单操作的URL放在一起？ 我不想发出两个不同的http请求。 形式如下：

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

Answer 1

从ie10开始，可以使用XHR2上传文件，如下所示：

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
}

来源： http ： //blog.teamtreehouse.com/uploading-files-ajax