Question

我正在运行一个网站，我想使用HTML5 File API和FileReader使用Drag'n Drop上传文件。我已成功设法创建新的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）。你有什么想法吗？

P.S。我使用jQuery，这就是$("#uploader")和其他人的原因。

Answer 1

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

编辑：显然我们的受访者应该更多地倾向于我们的答案，因为他们担心投票不足。谷歌代码链接现在已经死了（四年后），所以这里有一个非常相似的jQuery插件：http://www.igloolab.com/jquery-html5-uploader/

Answer 2

您需要提取base64编码的文件内容并将它们整理到服务器上。

的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)

HTML5拖放文件上传

2 个答案: