Как передать POST-параметры HTML-формы в PHP с помощью AJAX?

Question

Я пытаюсь реализовать функцию загрузки файлов на моем сайте.

Я создал настоящий PHP-скрипт для загрузки, и это то, что я добавил в свой HTML:

<form enctype="multipart/form-data" action="PHPScripts/upload.php" method="POST">
    <input type="file" id="browseButton" name="image" onchange="this.form.submit();" />
</form>

Это запускает upload.php, как и ожидалось, однако это не то, чего я хочу достичь точно. Я хочу вместо этого реализовать AJAX. Поэтому, когда пользователь выбирает файл, я хочу вызвать функцию JavaScript и хочу, чтобы эта функция впоследствии вызывала upload.php.

Но есть проблема: как мне передать параметры POST (т.е. $_POST["upload"] и $_FILES["image"]) в функцию PHP через JavaScript? Я знаю, что это должно быть просто, но я застрял. Спасибо за разъяснения.

Обновление

Список изменений объяснил, что это невозможно, как я себе представлял. Моя конечная цель - достичь следующего:

1. Пользователь просматривает изображение для загрузки.
2. PHP загружает изображение в указанное место на сервере.
3. (Это очень важно). Загруженный файл представляется в предварительно определенном теге после его успешной загрузки. Не могли бы вы дать несколько рекомендаций о том, как добиться третьего шага? Спасибо большое.

Answer 1

Хотя принятый ответ, вероятно, был точным в то время, с начала 2011 года ситуация немного изменилась. Тем не менее, даже сейчас в Stackoverflow есть комментаторы, которые продолжают настаивать на том, что вы не можете загружать файлы через ajax. Это просто неверно.

Загрузка файлов через Ajax с параметрами: Вариант 1

Файловый API в сочетании с XMLHttpRequestУровень 2 позволяет отправлять файлы через «ajax».Вы можете сделать это, используя объект FormData , который позволяет вам включать параметры вместе с вашими файлами в полезную нагрузку запроса.Отправка объекта FormData через XHR приведет к многочастному кодированному запросу.

var xhr = new XMLHttpRequest(),
    formData = new FormData();

formData.append('file1', file1);
formData.append('file2', file2);
formData.append('param1', 'foo');
formData.append('param2', 'bar');

xhr.open('POST', '/my/endpoint', true);

xhr.send(formData);

Очевидными преимуществами использования FormData является возможность отправлять несколько файлов в одном запросе и связывать параметры в полезной нагрузке запроса.Если вы отправляете запрос POST или PUT, ваши параметры должны быть в любом случае полезными.Одно небольшое неудобство связано со значением заголовка Content-Length.

Загрузка файлов через Ajax с параметрами: Вариант 2

Другой, более простой вариант - просто отправить запрос, который включает в себя весь файл кактело запроса:

var xhr = new XMLHttpRequest();

xhr.open('POST', '/my/endpoint?param1=foo&param2=bar', true);

xhr.send(file1);

При таком подходе любые параметры должны отправляться как часть строки запроса URI.Это может быть немного запутанным на стороне сервера, так как обычно ожидается, что параметры для запросов POST отправляются в теле запроса.Обратите внимание, что вы также должны отправить отдельный запрос для каждого файла, который может или не может быть важным, в зависимости от вашего рабочего процесса.

Поддержка браузера для загрузки файлов через Ajax

В настоящее время все браузеры, другиечем IE9 и старше, наряду с Android 2.3.x и, конечно, iOS5 имеют достаточную поддержку File API, чтобы сделать все это возможным.

Для браузеров, которые не поддерживают File API, вам нужно будет использовать <form> для загрузки файлов.Вы можете создать скрытый iframe (или iframes) с <form> в качестве тела, содержащего <input> элементы, которые представляют ваш файл (ы) и параметр (ы), и отправить эту форму через javascript, чтобы придать «ajaxy» внешний видв ваше приложение, даже без поддержки File API.

Answer 2

Вы не сможете загружать файлы через AJAX.

По сути, перехват AJAX выполняет сериализацию значений в вашей форме (вы можете попробовать $('#form_id').serialize() на консоли, чтобы посмотреть, что он делает).

Поскольку файл читается с диска, у вас нет этих данных во время отправки и вы не можете сделать это через AJAX, как вы можете с обычными полями.