Ошибка JQuery при загрузке файла

Question

Я хочу загрузить файл на веб-сервер с помощью HTML, JavaScript и PHP.

Мой HTML выглядит следующим образом:

<form method="post" enctype="multipart/form-data" name="uploadForm"> 
    <input type="file" name="uploadFile" onchange="uploadplz();"> 
    <!-- <input type="submit" name="upload_submit" value="Upload"> --> 
</form> 

Кнопка отправить закомментирована потому что я должен использовать только одну кнопку, чтобы загрузить и отправить файл. У меня есть атрибут onchange, который вызывает функцию JavaScript. Затем функция JavaScript вызывает функцию PHP, используя вызов AJAX.

Мой JavaScript/AJAX выглядит следующим образом:

<script type="text/javascript"> 
    function uploadplz() { 
     $.ajax({ 
      type: "POST", 
      url: "file.php", 
      data: "uploadForm", 
      success: function(response) { 
       alert(response); 
      } 
     }); 
    } 
</script> 

PHP Исеть выглядит следующим образом:

if(isset($_POST["uploadForm"])) { 
    upload_file(); 
} 

PHP Функция выглядит следующим образом:

function upload_file() { 
    $dir = "files/"; 
    $target_file = $dir.basename($_FILES["uploadFile"]["name"]); 

    echo $target_file."</br>"; 

    if(move_uploaded_file($_FILES["uploadFile"]["tmp_name"], $target_file)) { 
     echo $target_file." uploaded successfully.</br>"; 
    } else { 
     echo "Error uploading</br>"; 
    } 
} 

При использовании 2 кнопки, PHP работает отлично, т.е. загружает файл. Я предполагаю, что мой AJAX ошибочен при попытке использовать одну кнопку. Функция PHP возвращает сообщение Error uploading и пустое имя файла.

Любые предложения?

Answer 1

Вы загружаете только строку "uploadForm", а не объект File. Используйте FormData() для загрузки <form>, см. jQuery Ajax File Upload

function uploadplz() { 
    $.ajax({ 
     type: "POST", 
     url: "file.php", 
     data: new FormData(document.querySelector("form")), 
     processData: false, 
     contentType: false, 
     success: function(response) { 
      alert(response); 
     } 
    }); 
}