Страница обновления формы AJAX при использовании move_uploaded_file ()

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 CALL:

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>

Answer 2

Поскольку вызов ajax является асинхронным, вы должны запретить отправку формы, а затем, когда возвращается результат, вы проверяете, соответствует ли оно условию, и отправляете форму с помощью встроенного обработчика отправки, избегая метода protectDefault () вобработчик события jQuery:

$("#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>