Использование XMLHttpRequest для загрузки файла на локальный хост не запускает PHP-скрипт

Question

Я пытаюсь запустить простую систему загрузки с использованием php и XMLHttpRequest. Однако мне не удается достичь цели с помощью запроса. Это не работает ..

Вот моя HTML-форма, которая используется для получения файла изображения:

<form action="../session/uploader.php" method="post" enctype="multipart/form-data" id="uploadForm">
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

, и это мой PHP-скрипт, который сохраняет изображение в мою файловую систему:

<?php
if(isset($_POST["submit"])) {
    $target_dir = "../db/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);
}
?>

Теперь это прекрасно работает, но я хочу использовать XMLHttpRequest, чтобы страница не обновлялась при загрузке изображений. Я пытался сделать что-то, что казалось очень простым, но это не сработало ..

сначала я изменил PHP на это:

<?php
$target_dir = "../db/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);
?>

и прямо под моей формой в HTMLЯ добавил Javascript, который создает XMLHttpRequest и отправляет его:

<script>
    const uploadForm = document.getElementById("uploadForm");
    uploadForm.addEventListener("submit", function(e) {
        e.preventDefault();
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "../session/uploader.php", true);  
        xhr.setRequestHeader("Content-Type", "multipart/form-data");    
        xhr.send(new FormData(uploadForm));                 
    });
</script>

Проблема в том, что он просто не работает. Ничего не произошло. Я не получаю обратной связи. Это похоже на то, что сценарий uploader.php не вызывается.

Кто-нибудь знает, в чем может быть проблема?

Answer 1

if(isset($_POST["submit"]))

Кнопка отправки не будет включена в данные для отправки формы, установленные здесь, как если бы вы только что отправили форму «нормально».

xhr.send(new FormData(uploadForm));

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

Вы можете добавитьскрытое поле, а затем проверьте, установлено ли оно в $ _POST, или вы проверите, установлено ли fileToUpload напрямую (но помните, что оно будет в $ _FILES, а не в $ _POST.)

---

xhr.setRequestHeader("Content-Type", "multipart/form-data");

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

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