Question

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

到目前为止，我设法通过

读取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 形成到您的网址。它是异步方法，不会重新加载您的网页。

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应该，如果你测试它，请告诉我们。 < / p>

Answer 2

我相信你想要Dropzone.js

之类的东西

我还没有尝试过，但它是一个允许轻松将文件拖放到运行它的网站的库，v3.0无需使用jQuery。

拖放文件上传

2 个答案: