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

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

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

？

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

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

最佳答案

如果这是你的表格

<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本质上是一种告诉浏览器应使用哪种方案的方式。提交表单，但该方案本身不仅仅限于表单，因为您可以看到Formdata使用相同的表单。

关于javascript - 我们可以将二进制原始数据添加到<form>吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51121723/