XMLHttpRequest() не отправляет FormData(), что приводит к пустому массиву PHP $_FILES и не загруженному файлу ⇐ Php

[Anonymous]

Что я пытаюсь сделать:

По сути, я пытаюсь загрузить файл в каталог на сервере, который пользователь загружает через HTML-элемент .

Для этого я создаю новый XMLHttpRequest на Событие изменения элемента , которое должно отправлять данные загруженного файла в файл upload.php, который затем обрабатывает загруженный файл и асинхронно загружает его на сервер.

Мой код:

HTML

Код: Выделить всё

JS

Код: Выделить всё

document.querySelector('.js-uploaded-file').addEventListener('change', function() {

let file = this.files[0];
let formData = new FormData();

formData.append('file', file);

let xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);

xhr.setRequestHeader('Content-type', 'multipart/form-data');

xhr.upload.onprogress = function(e) {

if (e.lengthComputable) {

let percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete + '% uploaded');

}
};

xhr.onload = function() {

if (this.status == 200) {

console.info(this.response);

}
};

xhr.send(formData);

}, false);

PHP (upload.php)

Код: Выделить всё

print_r($_FILES);

$currentDir = getcwd();
$uploadDirectory = "/uploads/";

$errors = []; // Store all foreseen and unforseen errors here

$fileName = preg_replace("/[^A-Z0-9._-]/i", "_", $_FILES['file']['name']);
$fileSize = $_FILES['file']['size'];
$fileTmpName = $_FILES['file']['tmp_name'];
$fileType = $_FILES['file']['type'];

$uploadPath = $currentDir . $uploadDirectory . $fileName;

if ($fileSize > 2000000) {
$errors[] = "This file is more than 2MB. Sorry, it has to be less than or equal to 2MB";
}

if (empty($errors)) {
$didUpload = move_uploaded_file($fileTmpName, $uploadPath);

if ($didUpload) {
echo "The file " . basename($fileName) . " has been uploaded";
} else {
echo "An error occurred somewhere. Try again or contact the admin";
}
} else {
foreach ($errors as $error) {
echo $error . "These are the errors" . "\n";
}
}

Моя проблема

Этот код просто не работает. При печати массива $_FILES возвращается пустой массив, а при регистрации в консоли xhr.response регистрируется сообщение об ошибке, установленное в PHP («Где-то произошла ошибка. Попробуйте еще раз или обратитесь к администратору»). Я был бы очень признателен за любую помощь в решении этой проблемы, поскольку я просмотрел бесчисленное множество других онлайн-ресурсов по этой проблеме, и хотя я чувствую, что мой код делает именно то, что они все говорят, он все равно не работает.

Что я пробовал:

Я пробовал просто отправить форму вместо того, чтобы пытаться сделать это с помощью объекта FormData() и Событие изменения путем добавления кнопки отправки, и хотя страница перенаправлялась на ...url/upload.php и не работала асинхронно, массив $_FILES содержал правильные данные загруженного файла, и файл был загружен на сервер, что заставляет меня думать, что в моем коде Javascript должна быть проблема, связанная либо с XMLHttpRequest, либо с Объект FormData.

Подробнее здесь: https://stackoverflow.com/questions/549 ... -array-and