javascript - 我们可以将二进制原始数据添加到 中吗？

Question

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

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

？

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

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

Answer 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 .浏览器将在边界上添加各自的 vendor 前缀，例如此处的 webkit，但最终它始终是可靠的分隔符。

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

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