Как загрузить изображение на сервер с помощью ajax (jquery)?

Question

[Vadim Bakhtin]

Очень много гуглил, попадались в основном решения, основанные на специальных либах под js / jquery, нужно просто отправить форму, в которой выбрано изображение в input type = file, т.е. без лишнего функционала, типо progress бара, drag and drop и т.д., не пойму как передать это изображение php скрипту. Разбирал какие-то исходники, но они либо вообще не работали, либо там какая-то доп. библиотека использовалась.
В общем надеюсь на вашу помощь.

Answer 1

[Сергей Семенко]

Примерно так:

$('#form').on('submit', function (e) {
    var file = $('input[type=file]')[0].files[0],
        data = new FormData($(this)[0]);
    if (file == null) {
        alert("File is empty");
        return false;
    }
    e.preventDefault();
    submit(data);
});

function submit(data) {
    $.ajax({
        ...
        data: data,
        method: "POST",
        contentType: false,
        processData: false,
        ...
    });
}

Comments

[Vadim Bakhtin]

Благодарю. А как потом на php этими файлами управлять?

[Сергей Семенко]

Vadim Bakhtin: как обычно

[Vadim Bakhtin]

Сергей Семенко: т.е. если на input'е стоит name = 'image', то я получу этот файл в глобальной переменной $_FILES['image']?

[Сергей Семенко]

Vadim Bakhtin: да

[Vadim Bakhtin]

Такой еще вопросик, а одним ajax запросом получится отправить данные из текстовых полей и файл?

[Vadim Bakhtin]

Сергей Семенко: Разобрался сам, спасибо еще раз)

[Express777]

Учитывайте, что этот способ работает только в современных браузерах. В ИЕ 8 нет.

Answer 2

[Алексей]

Омг... Пример из официальной документации не работает чтоли?
php.net/manual/ru/features.file-upload.post-method.php