AJAX数据返回空

I have the code at the bottom that get's a name from a hidden input type, and I want to send that to a php page but the ajax data returns empty. The console.log on line 4 returns the value, but the console.log on the bottom returns empty. I tried changing the way I assign data inside the ajax call according to this article but this didn't change anything. Any ideas?

$('.uploadImage input[name="userImage"]').on("change", function(){
    var image = new FormData($('input[name="userImage"]')[0].files[0]);
    var name = $('.hidden').attr("name");
    console.log(name);
    $.ajax({
        type: "POST",
        url: "includes/ajax-image.php",
        processData: false,
        data: name,
        success: function(data){
            console.log(name);
        }
    });
});

ajax-image.php

 <?php
$name = $_POST["name"];
$dir = ("../user_img/".$name."");
    if (!file_exists($dir)) {
        mkdir($dir,0700);         
    }
 ?>

I added the ; at that line

Feel free to edit both of my code's, I really don't have and idea what to do next

The processData option here is not needed remove that and try again

try this

$('.uploadImage input[name="userImage"]').on("change", function(){
    var image = new FormData($('input[name="userImage"]')[0].files[0]);
    var name = $('.hidden').attr("name");
    $.ajax({
        type: "POST",
        url: "includes/ajax-image.php",
        processData: false,
        data: {"name": name },
        success: function(data){
            console.log(data);
        }
    });
});


 <?php
$name = $_POST["name"];
$dir = ("../user_img/".$name."");
    if (!file_exists($dir)) {
        mkdir($dir,0700);         
    }

echo $name;

 ?>