HTML5 拖放文件上传答案

【问题标题】：HTML5 Drag n Drop File UploadHTML5 拖放文件上传
【发布时间】：2011-09-24 16:28:07
【问题描述】：

我正在运行一个网站，我想使用 HTML5 File API 和 FileReader 通过拖放操作上传文件。我已经成功创建了一个新的FileReader，但我不知道如何上传文件。我的代码（JavaScript）如下：

holder = document.getElementById('uploader');

holder.ondragover = function () {
    $("#uploader").addClass('dragover');
    return false;
};

holder.ondragend = function () {
    $("#uploader").removeClass('dragover');
    return false;
};

holder.ondrop = function (e) {
  $("#uploader").removeClass('dragover');
  e.preventDefault();

  var file = e.dataTransfer.files[0],
      reader = new FileReader();
  reader.onload = function (event) {
    //I shoud upload the file now...
  };
  reader.readAsDataURL(file);

  return false;
};

我还有一个表单（id：upload-form）和一个输入文件字段（id：upload-input）。你有什么想法吗？

附：我使用 jQuery，这就是为什么会有 $("#uploader") 和其他人。

【问题讨论】：

标签： api file html file-upload drag-and-drop

【解决方案1】：

与其从头开始编写代码，不如使用 html5uploader 之类的东西，它通过拖放工作（使用 FileReader 等）：http://code.google.com/p/html5uploader/

编辑：显然，我们的受访者应该更倾向于我们的答案，因为害怕投反对票。 Google Code 链接现已失效（四年后），所以这里有一个非常相似的 jQuery 插件：http://www.igloolab.com/jquery-html5-uploader/

【讨论】：

顺便说一句，这似乎不是 Google 项目。
我试试看。谢谢:-)
您发布的链接已失效
这个帖子已经有四年多了。随意使用 Google。

【解决方案2】：

您需要提取 base64 编码的文件内容并将它们 ajax 传送到服务器。

JavaScript

var extractBase64Data;
extractBase64Data = function(dataUrl) {
  return dataUrl.substring(dataUrl.indexOf(',') + 1);
};

// Inside the ondrop event
Array.prototype.forEach.call(event.dataTransfer.files, function(file) {
  var reader;

  if (!file.type.match(options.matchType)) {
    return;
  }

  reader = new FileReader();

  reader.onload = function(event) {
    var contentsBase64;
    if (event.target.readyState === FileReader.DONE) {
      contentsBase64 = extractBase64Data(event.target.result);
      return $.post(someURL, {
        contentsBase64: contentsBase64
      });
    }
  };

  reader.readAsDataURL(file);
});

咖啡脚本

extractBase64Data = (dataUrl) ->
  dataUrl.substring(dataUrl.indexOf(',') + 1)


# Inside the ondrop event
Array::forEach.call event.dataTransfer.files, (file) ->
  return unless file.type.match(options.matchType)

  reader = new FileReader()

  reader.onload = (event) ->
    if event.target.readyState == FileReader.DONE
      contentsBase64 = extractBase64Data(event.target.result)
      $.post someURL,
        contentsBase64: contentsBase64

  reader.readAsDataURL(file)

【讨论】：