Можем ли мы добавить двоичные необработанные данные в <form>?

Question

Можно ли добавить двоичные необработанные данные в форму, например, в этом data поле:

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

В моем случае я хочу экспортировать изображение из canvas в JPEG с toDataURL, затем декодировать base64 в двоичные данные , добавить двоичные данные на <form>, который будет готов к отправке.

Почему я хочу , а не просто публиковать данные в кодировке base64? Потому что я хотел бы сэкономить 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--

Значение каждого поля формы охватывается границей. Интеллектуально вычисляется браузером граница, которая охватывает все текстовое поле формы, текстовые области и т. Д. (Включая необработанный поток данных файла входных файлов). все это для того, чтобы избежать столкновения с разделителем . Браузеры будут префиксировать границу с соответствующим префиксом вендора, таким как webkit, но в итоге это всегда будет надежный разделитель.

Теперь, даже если вы получите в свои руки эту низкоуровневую сборку данных, создание действительно надежного разделителя будет трудной задачей, если у вас возникнут опасения по поводу ввода файлов. Вот почему вы должны позволить браузеру обрабатывать такие вещи, как предлагается Решение на основе формданных хорошо сочетается с этим.

enctype='multipart/form-data' является единственным механизмом для отправки данных независимо от его природы, все остальные enctype (application/x-www-form-urlencoded, text/plain) просто поддерживают передачу ASCII. entype (s), по сути, являются способом определения схемы браузера. следует использовать для отправки формы, но сама схема не ограничивается простыми формами, поскольку вы можете видеть их с помощью формданных.