9

我正在使用<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？

4

2 回答 2

3

您必须使用FormData（提防 IE 支持）。

当 drop 发生时，您需要创建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);
  }
}

请注意，我仅在 Chrome 和 Firefox 中对其进行了测试，IE9 可能无法正常工作，但 IE10 应该，如果您对其进行测试，请告诉我们。

于 2013-07-29T16:17:06.893 回答
-2

我相信您想要Dropzone.js之类的东西

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

于 2013-07-29T16:31:18.580 回答