Question

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

一切正常，所有数据都正确发布。

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

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

表格：

<form id="form-send">

    <div class="c-form-group grid-2">
        <label for="first_name">First Name</label>
        <input class="c-form-control" type="text" id="first_name" name="first_name" placeholder="Joe" value="Joe">
    </div>

    <div class="c-form-group grid-2">
        <label for="file">Add File</label>
        <input class="c-form-control c-form-control--file" type="file" id="file" name="file">
    </div>

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

</form>

Ajax：

$("#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.');
    },
  });


})

端点：

<?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.";
      }

    }

  }


?>

Answer 1

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

Gen RAM Free: 12.8 GB  | Proc size: 155.7 MB
GPU RAM Free: 11441MB | Used: 0MB | Util   0% | Total 11441MB

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

$("#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.');
    },
  });


});

Answer 2

这是我在一个项目中能够实现的方式。希望对您有所帮助 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>

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

2 个答案: