Отправка данных и файлов из формы ajax?

Question

[Obivankinobi]

Добрый день! в JS не силен, но аяксом пользоваться люблю) Но вот настало время отправлять вместе с данными из формы и фотографии. И встал вопрос как это сделать??

<form enctype="multipart/form-data" action="">
<div class="input">
<input type="text" name="name" placeholder="ФИО">
</div>
<input name="file"id="file" type="file">
<input type="submit" class="btn" value="отправить">
</form>

$.ajax({
                type: "POST",
                url: "/message.php",
                cache: false,
                contentType: false,
                processData: false,
                data: $(this).parents('form').serialize(),
                success: function(data) {
                     console.log(data);
                   },
                   error: function(data){
                    alert("no");
                   }
            });

Нашел примерно решение проблемы, но как сюда добавить остальные данные из формы кроме файлов?...

var data = new FormData();
                $.each($('#file')[0].files, function(i, file) {
                    data.append('file-'+i, file);
                });

Answer 1

[Олег]

$('#form').on('submit', function(){
    $.ajax({
        type: 'POST',  
        context: this,
        url: '/message.php',
        data: new FormData(this),
        cache: false,
        processData: false,      
        success: function(){ alert('Good'); },
        error: function(){ alert('Bad'); }
    });
    return false;
});

Answer 2

[Сергей Новиков]

Попробуйте это. Давно не обновлялось, но все еще работает.