HTML5拖放文件上传

Question

我正在运行一个网站，在那里我想使用Drag‘n Drop上传文件，使用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）。你有什么想法吗？

第页。S.我使用jQuery，这就是为什么有$("#uploader")和其他的。

Answer 1

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

编辑：显然，我们这些受访者应该永远更倾向于我们的答案，因为他们害怕被否决。谷歌代码链接现在已经失效（四年后），所以这里有一个非常相似的jQuery插件：http://www.igloolab.com/jquery-html5-uploader/

Answer 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);
});

CoffeeScript

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)