Как отправить объекты 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();
});
Однако это приводит к:
Как видите, тип контента неправильный ...