Как реализовать отправку файла на сервер на чистом JS?

Question

[Александр]

Пробовал открывать файл с помощью FileReader readAsBinaryString, и отправлять на сервер multipart/form-data

Работает через раз. Проблему описывал здесь https://toster.ru/q/497423

На других форумах пишут, что проблема может быть из-за разной кодировки страниц. Нужно решение, которое бы работало при любой кодировке страницы.

При этом, без использования библиотек, вроде jQuery.
Желательно вообще без библиотек, на чистом js.

Третий день ломаю голову, не получается найти решение. Прошу помочь.

Comments

[BB 8]

multipart/form-data

Пытаетесь несколько файлов отправить, а отправляется только 1?

[Александр]

BB 8, нет, отправляю только один файл. Решение уже нйдено

Answer 1

[Александр Косицын]

вот нашел тебе ссылку.
смотри, там можно через id у формы сразу забрать все input(самое главное чтобы у них были аттрибуты name)
Или можно явно делать append для каждого input
ссылка
надеюсь поможет

Comments

[Александр]

Большое спасибо, это работает!

Answer 2

[Кирилл Горелов]

На всякий случай напишу про мелочи о которых все знают. Вдруг забыл, бывает.
1. multipart/form-data
2. <input type="file" name="file">
3. Посмотри что приходит get/post
4. max_file_uploads смотреть в phpinfo();
5. post_max_size смотреть в phpinfo();

И смотри какой вес файла отправляется.
Хотя бы будешь знать в чем причина ошибки.

Answer 3

[Максим]

На днях долго ковырялся с нативными fetch + formData для загрузки файла с формы. Как вы знаете, для того, чтобы браузер посчитал content-length и все такое нужен заголовок Content-type: multipart/form-data… в итоге, путем долгих поисков было найдено, что если использовать нативный fetch (не jquery.Ajax, не суперагент, isomorphic-fetch и другие, а именно нативный) - то заголовок Content-type устанавливать (внимание) не нужно.

Поэтому если есть возможность использовать нативный fetch (смотрите поддержку браузерами) - то все получится.