getFormData и отправка изображений через ajax
 

Есть форма:

И такой простенький код, для отправки изображения через ajax:

function upload(file) {

  var formdata = new FormData();
  formdata.append("image[name]", "Foooobar");
  formdata.append("image[image]", file);
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "images");
  xhr.send(formdata);
}

$('#image_image').change(function()
{
  upload(this.files[0]);
});

Он работает и загружает изображение.

Но когда я пытаюсь сделать так:

$('#image_image').change(function()
{
  var formElement = document.getElementById("new_image");
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "images");
  xhr.send(formElement.getFormData());
});

То вижу ошибку в Файрбаге:

Что я делаю не так? Почему js ругается на эту функцию?

Не могу понять, а где этот самый id="image_new"?

Пардон, когда переносил сюда код — опечатался. Везде "new_image".

$('#image_image').change(function()
{
  form=document.getElementById('new_image')
  data=new FormData(form)
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "images");
  xhr.send(data);
});

Так работает.

А что за метод getFormData?

так он только в мозилле работает
а alert(formElement.getFormData) выдает функцию?
по ошибке как будто бы этот метод не определен
formElement.getFormData is not a function

Уже не важно, data=new FormData(form) работает как нужно :)