Php 使用move_uploaded_file（）时刷新AJAX表单页面

我构建了一个简单的表单，使用jQueryAjax将数据发布到PHP端点

一切正常，数据都已正确发布

我遇到的问题是，一旦文件添加到输入并提交，页面就会刷新。如果我不添加文件，它不会刷新，如果我将文件输入全部取出，它也不会刷新。仅当文件成功移动时

    <div class="form-group">
        <label for="exampleFormControlInput1">Blog Title</label>
        <input type="text" class="form-control"  required="" name="title" id="title" placeholder="Enter your blog title">
    </div> 
    <div class="form-group">
        <label for="exampleFormControlTextarea1">Write your blog body here</label>
        <textarea class="form-control" name="body"   id="body" ></textarea>
    </div>
        <div id="dropzoneFrom" class="dropzone">
              <div class="dz-default dz-message">Test Upload</div>
        </div>          
    <div class="form-group">
        <label for="exampleFormControlInput1">Reference Link</label>
        <input type="text" class="form-control" id="link" name="link" placeholder="Post a reference link">
    </div> 
    <button type="submit" id="submit-all" class="btn btn-primary" name="submit" >Post</button>

我需要页面不刷新，因此首先使用AJAX

表格：

终点：

<?php

  $uploadDir = 'uploads/';

  // If post
  if (isset($_POST)) {

    // Request Values
    $firstname = $_REQUEST['firstname'];
    $file = $_REQUEST['file'];

    // Upload to folder
    if(!empty($_FILES["file"]["name"])){

      // File path config
      $fileName = basename($_FILES["file"]["name"]);
      $targetFilePath = $uploadDir . $fileName;
      $fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION);

      // Allow certain file formats
      $allowTypes = array('pdf', 'doc', 'docx', 'jpg', 'png', 'jpeg');
      if(in_array($fileType, $allowTypes)){

        // Upload file to the server
        if(move_uploaded_file($_FILES["file"]["tmp_name"], $targetFilePath)){
            echo "Success: File uploaded.";
        } else {
            echo "Error: Something went wrong.";
        }

      } else{
        echo "Error: File is not the correct format.";
      }

    }

  }


?>

---

由于ajax调用是异步的，因此必须阻止表单提交，然后在返回结果时，检查其是否符合条件，并使用本机提交处理程序提交表单，避免jQuery事件处理程序中的preventDefault：

$("#form-send").on('submit', function(e){

   e.preventDefault();

  $.ajax({
    type: "POST",
    enctype: 'multipart/form-data',
    url: '/send-form.php',
    cache: false,
    processData: false,
    contentType: false,
    data: new FormData(this),
    success: function(data) {
      console.log(data);
    },
    error: function(response) {
       console.log('An error ocurred.');
    },
  });


});

您可以删除负责刷新页面的表单标记。否则，您可以将按钮更改为

  <button id="send" class="c-btn c-btn--primary" type="button">Submit</button>

---

这就是我如何在我的一个项目中取得成功的方法。希望对我有所帮助 AJAX调用：

var form_data = new FormData();                  
        form_data.append('title',title);
        form_data.append('body',body);
        form_data.append('link',link);                            
        $.ajax
        ({
            url: 'blog_insert.php', 
            dataType: 'text', 
            cache : false,
            contentType : false,
            processData : false,
            data: form_data,                         
            type: 'post',
            success: function(php_script_response)
            {
                $("#success-message").css('display','active').fadeIn();
                var title = $('#title').val(' ');
                var body  = $('.nicEdit-main').html('');
                //$('#sortpicture').prop(' ')[0];
                var link  = $('#link').val('');
            }
         });

HTML

博客发布成功

    <div class="form-group">
        <label for="exampleFormControlInput1">Blog Title</label>
        <input type="text" class="form-control"  required="" name="title" id="title" placeholder="Enter your blog title">
    </div> 
    <div class="form-group">
        <label for="exampleFormControlTextarea1">Write your blog body here</label>
        <textarea class="form-control" name="body"   id="body" ></textarea>
    </div>
        <div id="dropzoneFrom" class="dropzone">
              <div class="dz-default dz-message">Test Upload</div>
        </div>          
    <div class="form-group">
        <label for="exampleFormControlInput1">Reference Link</label>
        <input type="text" class="form-control" id="link" name="link" placeholder="Post a reference link">
    </div> 
    <button type="submit" id="submit-all" class="btn btn-primary" name="submit" >Post</button>

---

表单submit上有e.preventDefault，但为了以防万一，您可以尝试将按钮更改为type=button，将处理程序更改为$send。单击。。。代替表单提交。你能试试这个图片上传器吗

    <div class="form-group">
        <label for="exampleFormControlInput1">Blog Title</label>
        <input type="text" class="form-control"  required="" name="title" id="title" placeholder="Enter your blog title">
    </div> 
    <div class="form-group">
        <label for="exampleFormControlTextarea1">Write your blog body here</label>
        <textarea class="form-control" name="body"   id="body" ></textarea>
    </div>
        <div id="dropzoneFrom" class="dropzone">
              <div class="dz-default dz-message">Test Upload</div>
        </div>          
    <div class="form-group">
        <label for="exampleFormControlInput1">Reference Link</label>
        <input type="text" class="form-control" id="link" name="link" placeholder="Post a reference link">
    </div> 
    <button type="submit" id="submit-all" class="btn btn-primary" name="submit" >Post</button>