Есть форма:
Код:
|
<form accept-charset="UTF-8" action="/foobar/images" class="new_image" data-remote="true" enctype="multipart/form-data" id="new_image" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="o8e15OqFzi/PYcWfzwpoBZb4YMHJ3JZ+2TU9Id/afi8=" /></div>
<p>
<label for="image_name">Name</label>
<br>
<input id="image_name" name="image[name]" size="30" type="text" />
</p>
<p>
<input id="image_image" name="image[image]" type="file" />
</p>
<p>
<input name="commit" type="submit" value="Create Image" />
</p>
</form> |
И такой простенький код, для отправки изображения через 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());
});
То вижу ошибку в Файрбаге:
Код:
|
TypeError: formElement.getFormData is not a function
[Break On This Error]
xhr.send(formElement.getFormData()); |
Что я делаю не так? Почему js ругается на эту функцию?