Почему $ _FILES [] всегда пусто?

Question

Проблема

Я пытаюсь сделать загрузчик файлов AJAX с Php и Javascript. Проблема в том, что в моем скрипте upload. php, где я пытаюсь использовать функцию move_uploaded_file, массив $_FILES всегда пуст.

Вот что я пробовал до сих пор

• Проверено file_uploads = On в /etc/php/7.2/apache2/php.ini
• Проверено текущий рабочий каталог uploader.php и upload.php
• Проверены права доступа к файлу uploads
• Изменено uploads_tmp_dir в /etc/php/7.2/apache2/php.ini

MWE

Html в загрузчике. php:

<form class="form" id="upload_form">
    <input type="file" name="file_to_upload" id="file_to_upload"><br>
    <input class="button" type="submit" value="Upload">
</form>

Javascript в загрузчике. php:

<script>
  var upload_form    = document.getElementById('upload_form');
  var file_to_upload = document.getElementById('file_to_upload');

  upload_form.addEventListener("submit", upload_file);

  function upload_file (e) {
    e.preventDefault();

    var xhr = new XMLHttpRequest()
    xhr.open("POST", "upload.php");
    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.send(new FormData(upload_form));
  }
</script>

загрузка. php:

<?php
//$target_path = "uploads/".basename($_FILES["file_to_upload"]["name"]);
$uploaded_file = $_FILES['file_to_upload']['tmp_name'];
var_dump($_FILES); // This is always array(0) { }

if(file_exists($uploadedFile)) {
   echo "file uploaded to temp dir";
} else {
   echo "file upload failed"; // This is always the outcome
}
//move_uploaded_file($_FILES["file_to_upload"]["tmp_name"], $target_path);
?>

Answer 1

В одном из моих проектов используется Framework-7. Я делал то же самое, чтобы получить форму для загрузки файла, используя ajax.

Делайте то, что предлагает @kmoser в своем ответе, но делайте так же, как показано ниже. :)

<form class="form" id="upload_form" enctype="multipart/form-data" method="post">
 <input class="button" type="submit" id="submission" value="Upload">

Теперь мой код:

$$('#submission').on('click', function(){
 //alert('here');
 //var test = $('#upload_form').serializeArray(); 

var fileInputElement = document.getElementById('file_to_upload');   

var formData = new FormData();  
formData.append('myfile', fileInputElement.files[0]);   
var request = new XMLHttpRequest();
request.open("POST", "https://yourwebsite/upload.php");
request.send(formData); 
    //console.log(request.response);

    request.onreadystatechange = function() {//Call a function when the state changes.
    if(request.readyState == 4 && request.status == 200) {
        alert("File has been uploaded successfully!");
        //console.log('here');
        location.reload();
    }
}
});

и наконец на загрузить. php файл напишите ниже код:

if(isset($_FILES['myfile'])) {       
    //echo "uploaded something";
    if($_FILES['myfile']['tmp_name'] != '') {
        $tmp_filenm = $_FILES['myfile']['tmp_name'];
        $file_name = time()."_".$_FILES['myfile']['name'];
        $file_fullpath = $today_dir."/".$file_name; 
        //echo $file_fullpath;
        move_uploaded_file("".$tmp_filenm,"$file_fullpath");

    }
}

Answer 2

В соответствии с PHP документами необходимо указать enctype="multipart/form-data". Вы также должны указать method="post" - см. Этот ответ для объяснения .

Поэтому ваш <form> должен выглядеть следующим образом:

<form class="form" id="upload_form" enctype="multipart/form-data" method="post">