Как отправить объекты FormData с Ajax-запросами в jQuery? [Дубликат]

На этот вопрос уже есть ответ:

Отправка multipart / formdata с помощью jQuery.ajax 12 ответов

TheXMLHttpRequest Уровень 2 стандарт (все еще рабочий проект) определяетFormData интерфейс. Этот интерфейс позволяет добавлятьFile возражает против XHR-запросов (Ajax-запросов).

Кстати, это новая функция - в прошлом использовался «трюк скрытого iframe» (об этом читайте в мой другой вопрос).

Вот как это работает (пример):

var xhr = new XMLHttpRequest(),
    fd = new FormData();

fd.append( 'file', input.files[0] );
xhr.open( 'POST', 'http://example.com/script.php', true );
xhr.onreadystatechange = handler;
xhr.send( fd );

гдеinput это<input type="file"> поле иhandler - обработчик успеха для Ajax-запроса.

Это прекрасно работает во всех браузерах (опять же, кроме IE).

Теперь я хотел бы, чтобы эта функциональность работала с jQuery. Я попробовал это:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.post( 'http://example.com/script.php', fd, handler );

К сожалению, это не сработает (выдается ошибка "Незаконный вызов" - скриншот здесь). Я предполагаю, что jQuery ожидает простой объект-ключ-значение, представляющий-имя-поля / значения формы, и символFormData экземпляр, который я передаю, явно несовместим.

Теперь, так как можно передатьFormData экземпляр вxhr.send(), Я надеюсь, что это также можно сделать с jQuery.

Обновить

Я создал "билет на функцию" в трекере ошибок jQuery. Это здесь:http: //bugs.jquery.com/ticket/999

Мне предложили использовать «предварительный фильтр Ajax» ...

Обновить

Во-первых, позвольте мне продемонстрировать, какое поведение я бы хотел достичь.

HTML:

<form>
    <input type="file" id="file" name="file">
    <input type="submit">
</form>

JavaScript:

$( 'form' ).submit(function ( e ) {
    var data, xhr;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    xhr = new XMLHttpRequest();

    xhr.open( 'POST', 'http://hacheck.tel.fer.hr/xml.pl', true );
    xhr.onreadystatechange = function ( response ) {};
    xhr.send( data );

    e.preventDefault();
});

Приведенный выше код приводит к этому HTTP-запросу:

Это то, что мне нужно - Я хочу этот тип содержимого "multipart / form-data"!

Предлагаемое решение будет выглядеть так:

$( 'form' ).submit(function ( e ) {
    var data;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    $.ajax({
        url: 'http://hacheck.tel.fer.hr/xml.pl',
        data: data,
        processData: false,
        type: 'POST',
        success: function ( data ) {
            alert( data );
        }
    });

    e.preventDefault();
});

Однако это приводит к:

Как видите, тип контента неправильный ...

Ответы на вопрос(9)

Ваш ответ на вопрос