Как я могу загрузить файлы (с / без других данных формы), используя Ajax и PHP?

Question

Это должно быть простое исправление, но я должен что-то упустить.Я долго смотрю на Stack Overflow и Google безуспешно.В прошлом проекте я не использовал Ajax, но это сделало бы мой текущий проект намного лучше.Я могу отправить другие формы просто отлично через Ajax;проблема заключается в загрузке файла.

Вот проблема: когда Apache запускает PHP, он не заполняет переменные $_POST и $_FILES, как обычно, но необработанные данные присутствуют вphp://input.Моя цель состоит в том, чтобы Apache / PHP обрабатывал это нормально, чтобы иметь доступ к файлам в $_FILES и другим данным формы в $_POST

Я что-то здесь упускаю?Есть ли способ для этого работать с использованием Ajax / XHR или мне придется отказаться от этого трека для загрузки файлов?

У меня есть простая форма HMTL:

<form action="files/upload.php" method="post">
    <input type="file" name="file">
    <input type="text" name="text">
</form>

Вот мойJavaScript, который вызывается при отправке формы:

// ...
// (Code that populates the form, url, and type variables)
// ...

var data = new FormData(form);

$.ajax({
    url: url,
    type: type,
    data: data,
    dataType: 'json', // expected response type
    // cache: false, // this didn't change the outcome
    processData: false,
    contentType: false, // have also tried 'x-www-form-urlencoded' and 'multipart/form-data'
    success: function() { /* ...code... */ }
}

Вот мой PHP для отладки:

<?php
var_dump($_POST);
var_dump($_FILES);
var_dump(file_get_contents('php://input'));
?>

Ввод "123456" в поле "текст", в результате получается:

array(0) {
}
array(0) {
}
string(289) "------WebKitFormBoundaryqcOElDa6F9aoBlux
Content-Disposition: form-data; name="samples"; filename="test.txt"
Content-Type: text/plain

ABCDEFG
------WebKitFormBoundaryqcOElDa6F9aoBlux
Content-Disposition: form-data; name="text"

123456
------WebKitFormBoundaryqcOElDa6F9aoBlux--
"

Другие (потенциально важные) сведения:

• Я запускаю это на своей виртуальной машине (не на общедоступном сайте)
• ОС: Ubuntu 16.04
• Apache Vesion: 2.4.18
• Версия PHP: 7.0.32
• Версия JQuery: 3.3.1
• Браузер: Chrome 70
• Моя пользовательская база очень мала и использует современные браузеры, поэтому не стоит беспокоиться о совместимости старых браузеров.
• Я бы не хотел добавлять еще один плагин, чтобы сделать это как можно больше (пытаясь избежать ненужных зависимостей).
• Я также хотел бы избежать "скрытых iframe-as-target-to-target-to-имитировать-асинхронных запросов"решение, если возможно, просто ради чистоты (но я готов прибегнуть к этому при необходимости).

Проверенные источники (среди прочих):

• Как использовать FormData для загрузки файла ajax
• Как я могу загружать файлы асинхронно?
• Эта скрипка из связанного вопроса (Я попытался изменить URL-адрес формы для отправки на IP-адрес моей виртуальной машины и получил похожие результаты)

Answer 1

Я нашел, где была моя проблема!Я использую переменную для заполнения contentType (contentType: contentType) в вызове ajax.Я передавал false в качестве значения, но у меня был один шаг в коде между ними, чтобы убедиться, что это не пустая строка (''), присваивая x-www-form-urlencoded, если она была пустой.

Проблема в том, что я использовал оператор != вместо оператора !== в этой проверке.Таким образом, false соответствует '', и он фактически назначил значение contentType равным x-www-form-urlencoded вместо false.Я изменил на правильный оператор, и он работает правильно.

Для тех, у кого есть подобные проблемы, используйте источники, перечисленные выше.Если что-то не имеет смысла в вашем вызове, убедитесь, что вы используете инструменты отладки и сделайте паузу в вызове ajax, чтобы увидеть значения ваших переменных, прежде чем тратить слишком много времени на разочарование.Если у вас есть contentType: false, и в вашем объекте FormData есть файл, JQuery автоматически установит заголовок Content-Type правильно, когда сделает вызов.