TutMee31 мар 2017 в 07:59

Кроссбраузерная отправка формы с файлом или как переписать весь отправщик несколько раз после тестирования в IE

7 мин

17K

Ajax * Internet ExplorerJavaScript *

Туториал

Комментарии 11

maria-tyan 31 мар 2017 в 08:10

Спасибо, очень полезная статья, как раз недавно столкнулась с этой проблемой.

NeuroZ 31 мар 2017 в 08:24

Ага, удобно то, что на сервере получаешь сгруппированные данные. Особенно если файл-обрабочик ajax запросов является общим (выступает в роли контроллера-маршрутизатора). Тогда просто необходимо отделять служебные данные (для маршрутизации запроса) от массива пользовательских данных.
Респект за статью! Надеюсь многие возьмут ее себе на вооружение, а то нормального frontend+верстальщика на фрилансе днем с фонарем не сыскать.

НЛО прилетело и опубликовало эту надпись здесь

ShamanR 31 мар 2017 в 08:49

>Главная проблема FormData заключается в Internet explorer (как всегда), а вернее, в его поддержке.
А вы пробовали искать полифил? Из статьи не очень понял, ак вы в итоге решили проблему с ИЕ.

TutMee 31 мар 2017 в 09:10

Использовал только нативные способы без подключения дополнительных библиотек. С помощью полифила можно просто через for..of перебрать formdata и с помощью set менять данные как нам угодно, но это уже не так интересно. Проблема с ie в итоге обходится с помощью ручной сборки всех данных с формы, а не простым вызовом конструктора к текущей форме.

seka19 31 мар 2017 в 10:17

Сталкивался с ещё одной проблемой IE:
Файл отправлялся на сервер, условно говоря, вот так:

/**
 * @param {Blob} file
 */
function sendFile(file) {
    var XmlHttpObject = new XMLHttpRequest(),
        form = new FormData();
    form.append('file', file);
    XmlHttpObject.send(form);
}

В результате запрос на бэкэнд приходил:

В случае любых браузеров, кроме IE: с заголовком Content-Type: multipart/form-data и содержимым файла в соответствующем виде в теле запроса.
В случае IE: с заголовком Content-Type: application/x-www-form-urlencoded (хотя тело запроса было как в случае multipart/form-data).
Это, в частности, препятствовало привычному использованию php-шного массива $_FILES, пришлось допиливать обёртку для парсинга тела запроса.
Не сталкивались с таким?