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

时间:2011-11-11 18:08:21

标签: html5 google-chrome xmlhttprequest

我正在使用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));
    };
  };
};

1 个答案:

答案 0 :(得分:3)

有几件事可能是罪魁祸首。您正在以二进制字符串形式读取文件,然后创建多部分请求,然后发送base64编码值。

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