通过原型Ajax调用提交二进制数据

Question

我正在使用Prototype提交POST请求，并且postdata包含许多字段，其中之一是来自文件的二进制数据（在这种情况下，用户已选择要上传的Excel电子表格）。

我正在使用HTML5 FileReader接口通过FileReader.readAsBinaryString()来获取文件的内容，效果很好。 如果我使用charCodeAt()在字符串中打印各种字符，则它们将带有预期值。

但是，一旦我将此字符串数据放入对象（以及其他表单字段）中，并将其作为parameters选项传递给Prototype的Ajax.Request() ，数据就会损坏。 某些字符值（例如0x82被替换为0xC2 0x82 0xAC被替换为0xC2 0xAC ，依此类推。

我尝试使用window.atob()对字符串进行base64编码，但这因InvalidCharacterError: String contains an invalid character而失败InvalidCharacterError: String contains an invalid character ，因此显然需要进行某种处理。

有谁知道如何通过Prototype的Ajax.Request()传递二进制数据，同时在同一请求中还包含其他表单字段？

Answer 1

要上传ajax文件，您实际上应该使用FormData对象

var data = new FormData();
//var data = new FormData(someForm); if all your fields is in an html form
// add fields to form
data.append('fieldname',fieldvalue);
data.append('filefieldname',fileobject);
//etc

new Ajax.Request(url, {
    contentType: null,
    method: 'post',
    postBody: data,
    onSuccess: successFunction
})

通过这种方法，服务器将看到请求，就像请求是由属性为enctype="multipart/form-data"

Answer 2

这样做需要魔术和小尘。 （不是真的）

首先，您需要将表单字段值作为URL参数而不是POST放置，然后用文件内容覆盖帖子正文。 例如

new Ajax.Request('/url.php?rawupload=1&id='+$F('id')+'&label='+label,
    {
        'method':'post',
        'postBody':fileobject,
        'onSuccess':function() { alert('success'); }
    });

fileobject是从文件上传输入元素中检索到的HTML5文件对象

是的，如果您有很多表单字段，它不是最优雅的解决方案。 如果您确实有很多表单字段来构建查询字符串，而不必手动进行操作，则也可以使用Hash#toQueryString

http://api.prototypejs.org/language/Hash/prototype/toQueryString/