拖放文件上传

Question

我正在使用<input type="file" />html标记在我的Web应用程序中使用文件上载.我的功能适用于从文件选择器中选择文件并提交文件,但是现在我想在拖放事件上传文件,即用户从他的计算机上的某个位置拖动文件,当他将其丢弃到特定的位置时在我的网页中,该文件开始上传.

到目前为止,我设法从drop事件中读取文件

  function drop(evt)
    {
       evt.stopPropogation();
           evt.preventDefault();

       if (containsFiles(evt))
       {
        var files = evt.dataTransfer.files;
        var count = files.length;

        // Only call the handler if 1 or more files was dropped.
        if (count > 0)
            // upload files
        }
      }
    }

但我怎样才能上传这些文件？出于安全原因,我无法更改input type = file的值.那么我该怎么做才能将这些文件传递给我的servlet呢？

Answer 1

您必须使用FormData（注意 IE 支持）。

当放置发生时，您需要创建FormData对象，并将数据附加到其中，然后将该表单POST到您的 url。它是异步方法，不会重新加载您的页面。

function drop(evt) {
  evt.stopPropogation();
  evt.preventDefault();

  var files = evt.dataTransfer.files;
  if (files.length > 0) {
    var form = new FormData();

    for(var i = 0; i < files.length; ++i) {
      var file = evt.dataTransfer.files[i];
      form.append('image_' + i, file, file.name);
    }

    var req = new XMLHttpRequest();
    req.open('POST', '/pathToPostData', true);
    req.onload = function(evt) {
      console.log(req.responseText);
    }
    req.send(form);
  }
}

请注意，我只在 Chrome 和 Firefox 中测试过它，IE9 可能无法工作，但 IE10 应该可以，如果你测试过，请告诉我们。