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

Submit binary data via Prototype Ajax call

本文关键字：提交 二进制 数据 调用 Ajax 原型      更新时间：2023-09-26

我正在使用原型提交POST请求，postdata包含许多字段，其中一个是文件中的二进制数据（在这种情况下，用户选择上传的Excel电子表格。

我正在使用HTML5 FileReader界面通过FileReader.readAsBinaryString()获取文件的内容，这运行良好。 如果我使用 charCodeAt() 打印字符串中的各种字符，那么它们就会得到预期的值。

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

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

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

要执行 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"的表单发送的一样

这样做需要魔法和小精灵尘埃。（其实不然）

首先，您需要将表单字段值作为URL参数而不是POST，然后用文件内容覆盖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/

相关文章：