拖放文件上传

Drag and Drop File Uploading

本文关键字：文件 拖放      更新时间：2023-09-26

我在web应用程序中使用<input type="file" /> html标记进行文件上传。我的功能可以很好地从文件选择器中选择文件并提交文件，但现在我想在拖放事件中上传文件，即用户从计算机上的某个位置拖动文件，当他将文件放在我网页的特定部分时，文件开始上传。

到目前为止，我设法通过从投递事件中读取了文件

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

您必须使用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应该，如果你测试它，请告诉我们

我相信你想要Dropzone.js 的点赞

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

相关文章：