如何在不刷新页面的情况下在同一个 { 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 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);


            });

Answer 2

您可以阻止提交时表单的默认行为，这会重定向表单。试试这个：

<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> of id response-text

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

How can i display form success message on same { div } without refreshing the page?

html

php

ajax

jquery

form-submit