[Upload Image Form] How to Integrate Ajax File Upload in WordPress 😒 use submit P2 (ok)

https://stackoverflow.com/questions/28125376/ajax-file-upload-in-wordpress-cant-pass-formdata

C:\xampp\htdocs\style2\wp-content\themes\gutener\test.php

<?php /* Template Name: Example Template */ ?>
<?php  
  get_header();
?>
<form class="fileUpload" enctype="multipart/form-data">
    <div class="form-group">
        <label>Choose File:</label>
        <input type="file" id="file"  name="img_caption" accept="image/*" />
        <button type="submit" id="submit" class="btn btn-primary">Submit</button>
    </div>
</form>
<?php  
  get_footer();
?>

C:\xampp\htdocs\style2\wp-content\themes\gutener\functions.php

function blog_scripts() {
    // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'file_upload' ),
    );
    wp_localize_script( 'custom-script', 'fiuajax', $script_data_array );
    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action('wp_enqueue_scripts', 'blog_scripts');
function fiu_upload_file(){
    var_dump($_FILES);
    exit();
}
add_action('wp_ajax_fiu_upload_file', 'fiu_upload_file');
add_action('wp_ajax_nopriv_fiu_upload_file', 'fiu_upload_file');

C:\xampp\htdocs\style2\wp-content\themes\gutener\js\custom.js

jQuery(document).on('click', '#submit', function(e) {
  e.preventDefault();
  var fd = new FormData();
  var file = jQuery(document).find('input[type="file"]');
  var caption = jQuery(this).find('input[name=img_caption]');
  var individual_file = file[0].files[0];
  fd.append("file", individual_file);
  var individual_capt = caption.val();
  fd.append("caption", individual_capt);
  fd.append('action', 'fiu_upload_file');
  jQuery.ajax({
    type: 'POST',
    url: fiuajax.ajaxurl,
    data: fd,
    contentType: false,
    processData: false,
    success: function(response) {
      console.log(response);
    }
  });
});

Hoặc thay đổi file custom.js chúng ta cũng có kết quả tương tự

C:\xampp\htdocs\style2\wp-content\themes\gutener\js\custom.js

jQuery(document).on('click', '#submit', function(e) {
  e.preventDefault();
  var fd = new FormData();
  var file = jQuery('#file');
  var individual_file = file[0].files[0];
  fd.append("file", individual_file);
  var individual_capt = file.val();
  fd.append("caption", individual_capt);
  fd.append('action', 'fiu_upload_file');
  jQuery.ajax({
    type: 'POST',
    url: fiuajax.ajaxurl,
    data: fd,
    contentType: false,
    processData: false,
    success: function(response) {
      console.log(response);
    }
  });
});