Javascript 拖放文件上载

我使用

html标记在web应用程序中使用文件上载。我的功能可以很好地从文件选择器中选择一个文件并提交该文件，但是现在我想在拖放事件中上载一个文件，即用户从其计算机上的某个位置拖动一个文件，当他将其拖放到我网页的某个特定部分时，该文件开始上载

直到现在，我还是设法通过

  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呢？

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

当删除发生时，您需要创建FormData对象，并将数据附加到其中，然后将该表单发布到您的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);
  }
}

功能下降（evt）{
evt.stopPropogation（）；
evt.preventDefault（）；
var files=evt.dataTransfer.files；
如果（files.length>0）{
var form=new FormData（）；
对于（变量i=0；i

---

注意我只在Chrome和Firefox上测试过它，IE9可能不起作用，但IE10应该，如果你测试过，请告诉我们。

我相信你想要的是喜欢的东西

---

我还没有尝试过，但它是一个库，可以轻松地将文件拖放到运行它的网站上，v3.0不需要使用jQuery。

请看一看，或者，如果您正在寻找一个支持良好的跨浏览器库来为您完成所有这一切，请看一看。完整披露：我维护Fine Uploader。Fine Uploader看起来像一个很好的插件！我将深入研究它，并尝试将其与我的web应用程序集成。谢谢@Ray Nicholus的帮助：）@Bernice没问题。如果您需要技术支持、发现错误或对新功能有想法/需要，请务必查看。不确定为什么有人否决了此答案。这是一个好的开始。需要详细说明吗？我在单页CMS中使用这种方法，用于类似API的应用程序，它工作得非常出色。关于否决票。请问是谁做的，提供什么和为什么的信息？谢谢@MaksimsMihejevs我刚刚尝试了这个，它正在提交我想要的数据。我现在唯一需要的是使用Ajax，这样我可以立即刷新页面，用户可以看到文件已上载。您实际上不需要刷新页面，因为上传后，服务器可以响应文件路径以及您需要的任何额外数据，然后在

.onload

中，您将收到这些数据，并且可以很容易地使用JavaScript更新前端，因此在不需要刷新的情况下进行更新会更好。但是，由于我需要立即显示带有上载文件和缩略图视图的表，所以我需要刷新页面。