在 Chrome 上通过 XHR 发送图像文件答案

【问题标题】：Send Image File via XHR on Chrome在 Chrome 上通过 XHR 发送图像文件
【发布时间】：2011-12-27 05:47:41
【问题描述】：

我正在使用 HTML5 拖放从用户的计算机中获取图像，并希望将它们上传到我的 Rails 服务器（在那一端使用 Carrierwave）。我不确切知道我在这里做什么，但根据这些说明拼凑了这段代码http://code.google.com/p/html5uploader/wiki/HTML5Uploader

这会返回 500 错误 - 谁能帮我看看我做错了什么？

var files = e.dataTransfer.files;
if (files.length){
  for (var i = 0; i<files.length; i++) {
    var file = files[i];
    var reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = function() {
      var bin = reader.result;
      var xhr = new XMLHttpRequest();
      var boundary = 'xxxxxxxxx';
      xhr.open('POST', '/images?up=true&base64=true', true);
      xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);
      xhr.setRequestHeader('UP-FILENAME', file.name);
      xhr.setRequestHeader('UP-SIZE', file.size);
      xhr.setRequestHeader('UP-TYPE', file.type);
      xhr.send(window.btoa(bin));
    };
  };
};

【问题讨论】：

标签： html google-chrome xmlhttprequest

【解决方案1】：

有几件事可能是罪魁祸首。您将文件作为二进制字符串读取，然后创建多部分请求，然后发送 base64 编码值。

无需读取文件或混淆 base64 编码。相反，只需构造一个FormData 对象，附加文件，然后使用xhr.send(formData) 直接发送。请参阅我的回复here。

【讨论】：