Как отправить файл и остальные данные через AJAX?

Question

[Forge0100]

При таком коде файл не будет помещен в $(this).serialize();.

$.ajax({
   type: 'PUT',
   dataType: 'json',
   data: $('form').serialize(),
   url: app + 'users/' + user_data.id,
   success: function(data) {
      alert('Success!');
   },
    error: function(err){
       alert('Failed!');
   }
});

Еще как-то реализуют через new FormData();

Может есть общий формат для этих двух видов данных?

Заранее спасибо!

Answer 1

[M K]

Не знаю, к чему у Вас применяется .serialize(), но FormData организуется так:

var form=new FormData(); // Создаем форму
form.append("file",file); //добавляем фаил
form.append("pararm1",param1); 
/*Остальные параметры*/
form.append("pararmN",paramN); 
// pure JS без jquery 
var x=new XMLHttpRequest();
x.open("post", "http://url...", true);
x.send(form); // Отправка без заголовков

Comments

[Forge0100]

Я понимаю, но как мне передать массив остальных параметров в form.append("pararmN",paramN);

paramN - в него же нельзя передать $('form').serialize();

[M K]

Самыи тривиальныи способ - перебор массива:
Можно при инициализации передать форму:
new FormData(form)

[Forge0100]

Да и еще, как мне указать путь к файлу в строке form.append("file",file);

file - вот так $('#file')[0] или нет?

[M K]

Forge0100: по идее, если форма содержит поле с фаилом, то при такои инициализации, должно всё автоматически указаться: new FormData($("form"))

[Forge0100]

странно, выдает Uncaught TypeError: Illegal invocation

[M K]

Forge0100: jsfiddle.net/Maxsior/tkqmgp2t

Answer 2

[Дима Паутов]

А вы вообще в курсе что передает у вас $(this)?

Comments

[Forge0100]

Да, он просто находиться в событии submit: $('form').submit(function(event) { ... }