如何在不刷新页面的情况下在同一{div}上显示表单成功消息？

Question

如何在不刷新页面的情况下在同一表单上提交表单？ 在这里，我要提交一个pdf来拖放容器，当我提交表单时，它会重定向到upload.php。 我需要在同一容器上显示成功消息。 我对ajax的了解不足。 请帮助我解决问题

这是下面的拖放容器：

这是下面的结果页面（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>

现在，您可以在想要显示的任何地方显示所需的消息。 我在这里显示了id response-text <p>

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);


            });