Как правильно отправить файл в двоичном формате через POST?

Question

Когда я загружаю файл обычным способом без Ajax, страница перезагружается, и полезная нагрузка POST-запроса выглядит следующим образом, когда я смотрю на него на вкладке сети инспектора элементов Chrome:

------WebKitFormBoundaryXseUYiNOVZKdYrTk
Content-Disposition: form-data; name="fdata[]"; filename="baby_bot.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryXseUYiNOVZKdYrTk
Content-Disposition: form-data; name="fdata[]"; filename="dyno_bones.png"
Content-Type: image/png


------WebKitFormBoundaryXseUYiNOVZKdYrTk--

Но когда я пытаюсь создать запрос POST вручную и отправить файл с помощью ajax, используя объект FileReader для чтения содержимого файла в двоичном формате и отправки двоичных данных через созданный вручную запрос POST, полезная нагрузка выглядит следующим образом:inspector:

------CustomFormBoundaryXseUYiNOVZKdYrTk
Content-Disposition: form-data; name="fdata[]"; filename="baby_bot.jpg"
Content-Type: image/jpeg

a2q#¡B±Áð$RÑá3ñ%br4C&Scs¢ÂâÿÄ

------CustomFormBoundaryXseUYiNOVZKdYrTk
Content-Disposition: form-data; name="fdata[]"; filename="dyno_bones.png"
Content-Type: image/png

a2q#¡B±Áð$RÑá3ñ%br4C&Scs¢ÂâÿÄ

------CustomFormBoundaryXseUYiNOVZKdYrTk--

Обратите внимание, что вы можете видеть двоичные данные (представленные случайными символами с акцентом), когда они находятся в теле запроса POST.Как сделать так, чтобы мой POST-запрос, созданный вручную, был полностью идентичным запросу браузера, чтобы я получал идентичные результаты из моего сценария обработчика PHP?Идея заключается в том, что я могу эмулировать запросы POST, которые отправляет браузер, и мне не нужно ничего изменять в бэкэнде PHP.

Answer 1

Вместо того, чтобы пытаться эмулировать данные запроса POST, используйте объект FormData.Он прост в использовании и позволяет легко отправлять данные формы через ajax.FormData объект автоматически создает и отправляет соответствующий запрос POST с помощью XMLHttpRequest объекта.

Документация Mozilla содержит хорошую статью о том, как использовать объект XMLHttpRequest , которыйСам включает в себя хороший пример использования объекта FormData .