Как передать изображение из формы (ajax)?

Question

[fuckingawesomenigga]

Имеется такой скрипт:

$('#edit').click(function(event) {
        ajaxEdit();
    });

    var ajaxEdit = function() {
        $.ajax({
                url: 'functions.php',
                type: 'POST',
                dataType: 'html',
                data: $('#edit-item').serialize()
            })
            .done(function() {
                ajaxShow(section);
            })
            .fail(function() {
                console.log("error");
            });
    }

Такая форма

<form action="" id="edit-item">
<input value="" name="id" type="hidden">
<input value="" name="name" type="text" placeholder="name">
<input type="file" name="picture" >
</form>

Как сделать, чтоб запрос отсылал изображение?

Answer 1

[irishmann]

Как-то так

var ajaxEdit = function() {
    var form_data = new FormData();
    form_data.append('file', $('input[name=picture]').prop('files')[0]);
    form_data.append('id', $('input[name=id]').val());
    form_data.append('name', $('input[name=name]').val());
    $.ajax({
        url: 'functions.php',
        type: 'POST',
        dataType: 'html',
        data: form_data
    })
    .done(function() {
        ajaxShow(section);
    })
    .fail(function() {
        console.log("error");
    });
}

Comments

[Антон]

Зачем аппенд, когда в форма дата можно передать this?
Если для наглядности, вопрос снимаю

[alex-1917]

так лучше:

form_data.append('file', this.picture.files[0]); // добавляем файл

Answer 2

[Антон]

Formdata используйте вместо сериализации