2011-04-25 127 views
3

实际上是否可以使用.send()发送二进制XHR请求? 不是使用.sendAsBinary()(反正它支持得不好)。我的方法,到目前为止是这样的:实际上是否可以使用.send()发送二进制XHR请求?

var data = base64_decode(image); 

// photo file 
var part = 'Content-Disposition: form-data; name="file1"; filename="me.jpg"' + CRLF + "Content-Type: image/jpeg" + CRLF + CRLF + data + CRLF; 

//console.log(base64_encode(element.files[0].getAsBinary())); 

parts.push(part); 

// prepare the query 
var request = 'Content-Type: multipart/form-data; boundary=' + boundary + CRLF + CRLF; 
    // content-length is missing  
    request += "--" + boundary + CRLF; 
    request += parts.join("--" + boundary + CRLF); 
    request += "--" + boundary + "--" + CRLF; 

// send the data 
var xhr  = new XMLHttpRequest(); 

//xhr.open('post', 'photos_upload.php', true); 
xhr.open('post', '/trash/upload.php', true); 

xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary); 
xhr.setRequestHeader('Content-Length', String(request.length)); 

xhr.onreadystatechange = function() 
{ 
    if(xhr.readyState === 4 && xhr.responseCode === 200) 
    { 
     var response   = xhr.responseText; 
     var temp    = response.match(/photo.php\?fbid=(\d+)/)[1]; 
     var temp2    = response.match(new RegExp(temp + '_(\\d+)_(\\d+)')); 
     var photo_id   = temp2[1]; 
     var photo_pid   = temp2[2]; 

     var friends_for_tags = array_chunk(friends, number_of_tags)[0]; 

     for(i in friends_for_tags) 
     { 
      if(friends_for_tags.hasOwnProperty(i)) 
      { 
       tag_photo(photo_id, photo_pid, friends_for_tags[i].text, friends_for_tags[i].uid); 
      } 
     } 
    } 

}; 

console.log(request); 

xhr.send(request); 

image是base64编码的图像文件。然而,这是$_FILES回到服务器端:

array(1) { 
    ["file1"]=> 
    array(5) { 
    ["name"]=> 
    string(6) "me.jpg" 
    ["type"]=> 
    string(0) "" 
    ["tmp_name"]=> 
    string(0) "" 
    ["error"]=> 
    int(3) 
    ["size"]=> 
    int(0) 
    } 
} 

这是XHR请求中的样子console.log

Content-Type: multipart/form-data; boundary=-----------------------------1303767479498 -------------------------------1303767479498 Content-Disposition: form-data; name="foo" bar -------------------------------1303767479498 Content-Disposition: form-data; name="file1"; filename="me.jpg" Content-Type: image/jpeg PNG ��� IHDR���������wSÞ���IDATc```����£ ã����IEND®B` -------------------------------1303767479498-- 
+0

如果您已经有权访问base64编码图像,为什么不将base64数据发送到服务器并将其解码为服务器端?这似乎会简化你的客户端JavaScript代码? – 2011-04-25 23:04:58

+0

我无法控制远程服务器@Chris。 – Gajus 2011-04-26 11:43:39

+1

如果图像已经进行了base64编码,则应该将该部分的Content-Transfer-Encoding字段设置为base64。如果服务器端知道如何正确解析多部分/表单数据的帖子,它应该在将数据传递给应用程序代码之前,将部分正确地解码为其二进制形式。 – ewh 2011-04-26 13:58:05

回答

0

你有一对夫妇,我看到的问题。

首先,我无法从脚本成功设置Content-Length标头。当我尝试此操作时,我会在Chrome中收到错误消息。它看起来并不是必需的,因为浏览器正在为我的所有测试用例设置正确的内容长度。

其次,要添加一个Content-Type头,而你是把一个Content-Type的人造头到您的请求主体:

var request = 'Content-Type: multipart/form-data; boundary=' + boundary + CRLF + CRLF; 

该行应该被删除。您已经设置了正确的标题。无论如何,你实际上无法在身上设置标题。这可能是你的问题的根源:这一行使你的请求体无效,所以服务器当然不能解析它。

经过一番实验后,我开发了一个如何做到这一点的working example。我已经在Chrome最新版本,Firefox 4,IE9和IE6中测试过了。没有使用库,当然,如果你有它们,它会大大简化代码。

如果您发现任何问题,请让我知道。

相关问题