我们可以将二进制原始数据添加到 <form> 吗？答案

【问题标题】：Can we add binary raw data to a <form>?我们可以将二进制原始数据添加到 <form> 吗？
【发布时间】：2018-07-01 08:40:57
【问题描述】：

是否可以将二进制原始数据添加到表单中，例如在这个data 字段中：

<form action="/upload" method="post">
<input type="hidden" id="data" />
<input type="submit" />
</form>

在我的用例中，我想使用toDataURL 将图像从canvas 导出为JPEG，然后将base64 解码为二进制数据，将二进制数据添加到<form> ，即可提交。

为什么我想不只发布 base64 编码的数据？因为我想为客户端节省 1/3 的上传时间/为服务器节省带宽，而且众所周知 base64 比 1.333 倍的二进制数据大。

【问题讨论】：

用javascript(FormData)组装表单数据并添加二进制数据(Blob)。
这个stackoverflow.com/a/45698370/6160662 会有所帮助。
var formData = new FormData(); formData.append("data", new Blob([data], { type:"application/octet-stream" }));
@transporter_room_3 是否可以将其添加到document.getElementById('data') 并使用普通的
提交，或者这是否一定需要 AJAX？
@Viney 这使用 AJAX，是否也可以使用标准
提交？

标签： javascript base64 forms

【解决方案1】：

如果这是你的表格

<form action="something.php"  method="post" enctype="multipart/form-data">
  <input type="text" name="firstname" value="Peter">
  <input type="text" name="lastname" value="Quill">
  <input type="file" name="photo">
  <input type="submit" value="Submit">
</form>

这就是它的发送方式

------WebKitFormBoundarybHHp9cSVfgrymPhN
Content-Disposition: form-data; name="firstname"

Peter
------WebKitFormBoundarybHHp9cSVfgrymPhN
Content-Disposition: form-data; name="lastname"

Quill
------WebKitFormBoundarybHHp9cSVfgrymPhN
Content-Disposition: form-data; name="photo"; filename=""
Content-Type: application/octet-stream


------WebKitFormBoundarybHHp9cSVfgrymPhN--

每个表单字段的值都被包围，边界由浏览器智能计算，因为它遍历整个表单文本框、文本区域等（包括文件输入的原始文件字节流）所有这些都是为了避免Delimiter collision。浏览器会在边界前加上它们各自的供应商前缀，比如这里的 webkit，但最终它总是一个可靠的分隔符。

现在，即使您掌握了这种低级别的数据组合，如果您碰巧需要担心文件输入，创建一个真正可靠的分隔符将是一项艰巨的任务。这就是为什么您应该让浏览器处理建议的此类内容基于 Formdata 的解决方案非常适合。

enctype='multipart/form-data' 是发送数据的唯一机制，无论其性质如何，所有其他 enctype (application/x-www-form-urlencoded,text/plain) 仅支持 ASCII 传输。entype(s) 本质上是一种告诉浏览器使用哪种方案的方法应该使用来提交表单，但方案本身并不仅限于表单，因为您可以看到 Formdata 使用相同。

【讨论】：