Как загрузить файлы с формы через ajax?

Question

[VitStar]

Всем привет! Делаю форму с отправкой файлов. Нашел вот эту статью и делаю как тут. Но не работает. Суть в том что там форма с оплатой и после успешной оплаты выполняется ajax запрос к обработчику. Все поля попадают норм кроме самих файлов. В чем может быть проблема ?
Ajax


Тут переменная file

пустая получается

Comments

[Vladimir]

в общем виде это можно сделать так:

let fileToServer = new XMLHttpRequest();
fileToServer.open('POST', 'название обработчика.php', true);
let fileToAttach = new FormData();
fileToAttach.append('имя ключа в масссиве POST', elem.files[0]);
fileToServer.send(fileToAttach);

[VitStar]

Без ajax все работает

Answer 1

[BI0R0B0T]

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

Comments

[Vladimir]

причём тут локальные? Отправка на сервер идёт.

[BI0R0B0T]

Файл который прикрепляют к форме находится на компьютере пользователя - он локальный, к нему нет доступа у JS по причинам безопасности. Соответственно он не может быть обработан при помощи JS и отправлен на сервер - посмотрите в консоли разработчика, что реально уходит на сервер и вы увидите, что на сервер уходят данные без файла.
Ниже @teen предложил варианты обхода этого.

Answer 2

[Денис Васильев]

А если собирать данные не с помощью jQuery, а formData
https://learn.javascript.ru/xhr-forms#formdata

Только придется добавить опции для ajax запроса. В конце этой статьи есть пример.

Comments

[VitStar]

Когда использую formdata почему то выдает такую ошибку Uncaught TypeError: Illegal invocation

[VitStar]

Вот полный код

; (function ($) {

  $('#order-form').submit(function (e) {
    var $form = new FormData();

    var amounts = $('#registration-summa');
    var fio = $('#registration-fio');
    var phone = $('#registration-phone');
    var email = $('#registration-email');
    // if (amounts.val() == '' || $.isNumeric(amounts.val()) == false) {
    //   amounts.css('border-color', 'red'); amounts.attr('placeholder', 'Заполните поле!'); amounts.focus(); return false;
    // }
    // if (fio.val() == '') {
    //   fio.css('border-color', 'red'); fio.attr('placeholder', 'Заполните поле!'); fio.focus(); return false;
    // }
    // if (phone.val() == '') {
    //   phone.css('border-color', 'red'); phone.attr('placeholder', 'Заполните поле!'); phone.focus(); return false;
    // }
    // if (email.val() == '') {
    //   email.css('border-color', 'red'); email.attr('placeholder', 'Заполните поле!'); email.focus(); return false;
    // }
    var amountSber = amounts.val();
    var DescrSber = fio.val() + ', ' + phone.val() + ', ' + email.val();
    ipayCheckout({
      amount: amountSber,
      currency: 'RUB',
      order_number: '',
      description: DescrSber
    },
    function (order) {
      showSuccessfulPurchase(order)
    },
    function (order) {
      showFailurefulPurchase(order)
    });

    function showSuccessfulPurchase(order) {

     

      $.ajax({
        type: "POST", //Метод отправки
        url: "/wp-content/themes/Paritet/sendmail_order.php", //путь до php фаила отправителя
        data: $form,
        success: function (e) {
          console.log(e);
        }

      });

    }
    function showFailurefulPurchase(order) {
      console.log('Ошибка');
    }
    //отмена действия по умолчанию для кнопки submit
    e.preventDefault();
  });

})(jQuery);

[Денис Васильев]

по второй ссылке в конце есть сниппет

// выполняем HTTP (AJAX) запрос
//   url - адрес, содержащий php скрипт, который будет обрабатывать запрос
//   procedData - параметр, с помощью которого отключим преобразование данных в строку запроса
//   contentType - параметр, с помощью которого отключим установления  типа контента jQuery
//   type - параметр, с помощью которого установим в качестве метода отправки запроса POST
//   success - параметр, который 
$.ajax({
  url: 'process.php',
  data: formData,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function (data) {
    result.html(data);
  }
});

попробуйте использовать эти ajax параметры: processData и contentType

Answer 3

[teen]

1. Используйте FormData. Примеры использования можно найти в интернете.
   Нужно упомянуть что старые браузеры это не поддерживают
   
2. Можно использовать отправку через iframe. Научиться можно тут
   
3. Использовать FileReader. Примеры использования можно найти в интернете.
   Поддерживается не всеми браузерами
   
   

Возможно есть и другие способы. Буду рад если кто-то покажет ;)

Answer 4

[2cha.headz]

$('form').submit(function(e){
    e.preventDefault();

    data = new FormData(this);
    xhr = new XMLHttpRequest();

    xhr.open( 'POST', '/url', true );
    xhr.onreadystatechange = function ( response ) {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            console.log(xhr.responseText);
        }
    };
    xhr.send( data );

});