Как я могу отобразить сообщение об успехе формы на том же {div}, не обновляя страницу?

Question

Как я могу отправить форму на ту же самую страницу без обновления? Здесь я отправляю PDF-файл для перетаскивания контейнера, и когда я отправляю форму, он перенаправляет на upload.php. Мне нужно отобразить успешное сообщение в том же контейнере. У меня недостаточно знаний об Аяксе. Пожалуйста, помогите мне решить проблему

Вот контейнер для перетаскивания ниже:

Вот страница результатов (upload.php) ниже:

HTML-форма:

<form method="POST" action="upload.php" enctype="multipart/form-data">
  <input type="file" multiple name="file[]" accept="application/pdf">
      <input class="button-primary" type="submit" value="Submit">
</form>

Файл Upload.php:

<?php 
//echo 'done';
$output = '';

    if(isset($_FILES['file']['name'][0])){
        //echo 'ok';
        foreach($_FILES['file']['name'] as $keys => $values) {

            if(move_uploaded_file($_FILES['file']['tmp_name'][$keys], 'upload/' .$values)) {

                $output .= 'Form submited succesfully';
            }
        }
    }
echo $output;
?>

Answer 1

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

<form id="form" method="POST" enctype="multipart/form-data">
  <input id='file' type="file" multiple name="file[]" accept="application/pdf">
  <input class="button-primary" type="submit" value="Submit">
</form>
<p id="response-text"></p>
    <script>
        $("#form").submit(function (e) {
            e.preventDefault();
            var xhttp = new XMLHttpRequest();
            var data = new FormData();
            data.append("file", document.getElementById("file").files[0]);
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("response-text").innerHTML = 'Form Successfully Submitted';
                }
                else {
                    document.getElementById("response-text").innerHTML = 'Form could not be submitted';
                }
            };
            xhttp.open("post", "/upload.php", true);
            xhttp.send(data);
        });

    </script>

Теперь вы можете отобразить желаемое сообщение, где вы хотите отобразить. Здесь я показал на <p> идентификатор response-text

Answer 2

Используйте следующий код

<form method="POST" enctype="multipart/form-data">
            <input id='file' type="file" multiple name="file[]" accept="application/pdf">
            <input id='submit'class="button-primary" type="submit" value="Submit">
        </form>

 $("#submit").submit(function(e){
    e.preventDefault();
 var xhr = new XMLHttpRequest();
          var data = new FormData();

          data.append("file",document.getElementById("file").files[0]);
          xhr.open("post","/upload.php",true);

          xhr.send(data);


            });