JQuery AJAX не отправляет файл с формой

Question

У меня есть следующая функция AJAX с JQuery:

var formData = $('#FonykerEditForm').serialize();    
$.ajax ({
    type: 'POST',
    url: '<?php echo $html->url('/fonykers/edit',true); ?>',
    data: formData,
    dataType: 'json',
    success: function(response) {
        message.html(response.msg);
        message.fadeIn();
        if(!response.ok) {
            message.removeClass('success');
            message.addClass('error');
        } else {
            message.removeClass('error');
            message.addClass('success');
            username = $('#FonykerUsername').val();
            email = $('#FonykerEmail').val();
        }

        $('#save-account-button').removeAttr('disabled');
        $('.input-text').removeClass('ok');
        $('.input-combo').removeClass('ok');
    },
    error: function (xhr, ajaxOptions, thrownError){
        alert(xhr.statusText);
        alert(thrownError);
        $('#save-account-button').removeAttr('disabled');
    }
});

Проблема, с которой я столкнулся, заключается в том, что поле типа файла в моей форме не передается вместе с остальными данными формы. Как я могу включить файл в данные запроса ajax?

Answer 1

Я попробовал эту ссылку, и это прекрасно работает для меня.

http://portfolio.planetjon.ca/2014/01/26/submit-file-input-via-ajax-jquery-easy-way/

Пример:

  $( '#my-form' ).submit( function( e ) {
  $.ajax( {
    url: 'http://host.com/action/',
    type: 'POST',
    data: new FormData( this ),
    processData: false,
    contentType: false
  } );
  e.preventDefault();
} );

Answer 2

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

Посмотрите, как этот плагин делает это:

https://github.com/valums/file-uploader/blob/master/client/fileuploader.js#L995

https://github.com/FineUploader/fine-uploader

Answer 3

В основном AJAX будет отправлять данные в виде пар ключ / значение. Поскольку файлы являются двоичными данными, вы не можете отправлять файлы с использованием Ajax. Вам нужно будет отправить данные, используя вместо этого стандартную форму отправки и на сервере, так как принимаем form/multipart