XMLHttpRequest () не отправляет FormData (), в результате чего пустой массив PHP $ _FILES и файл не загружен - PullRequest
Новая
       33

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

0 голосов
/ 28 февраля 2019

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

По сути, я пытаюсь загрузить файл в каталог на сервере, который пользователь загружает через элемент HTML <input type="file">.

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

Мой код:

HTML 

<form class="js-upload-form" method="POST" action="upload.php" enctype="multipart/form-data">
    <input class="button js-uploaded-file" type="file" name="file" />
</form>

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 (загрузить.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() и <input> событие изменения, добавив кнопку отправки ихотя страница перенаправлена ​​на ... url / upload.php и не работает асинхронно, массив $_FILES содержал правильные данные загруженного файла, и файл был загружен на сервер, что заставляет меня думать, что должно бытьпроблема в моем коде Javascript, связанная с XMLHttpRequest или FormData объектом.

1 Ответ

0 голосов
/ 28 февраля 2019

Обычно XMLHttpRequest генерирует соответствующий Content-Type из объекта FormData.

Однако вы переопределяете его на созданный вручную: 

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

Однако обязательный атрибут boundary отсутствует, поэтому PHP не может найти точки для разделения частей запроса.

Не переопределяет Content-Type ,Удалить цитируемую строку.

...