I have ajax submitting my form everything works except the user image. It works without ajax but not sure why it's not working with ajax. My ajax is and form are shown below.

<form method="post" enctype="multipart/form-data" id="profile-form" action="" class="form" accept-charset="UTF-8">

{{ csrfInput() }}

<input type="hidden" name="action" value="users/save-user">
<input type="hidden" name="redirect" value="account">
<input type="hidden" name="userId" value="{{ currentUser.id }}">
{{ redirectInput('my-program/account') }}

{% macro errorList(errors) %}
{% if errors %}
    <ul class="errors">
        {% for error in errors %}
            <li>{{ error }}</li>
        {% endfor %}
    </ul>
{% endif %}
{% endmacro %}

{% from _self import errorList %}

<input type="hidden" name="userId" value="{{ currentUser.id }}">
<div class="row no-gutters">
    <div class="col-sm-3">
        {% if currentUser.getPhoto != '' %}
            <img src="{{ currentUser.photo.getUrl }}" alt="" class="mx-auto d-block img-fluid" style="width:150px;">
            {% else %}
            <img src="http://13.57.33.145/web/cpresources/e68e2d59/images/user.svg?v=1532465642" class="mx-auto d-block img-fluid" style="width:120px;">
        {% endif %}
        <input type="file" id="userPhoto" name="photo" value="Upload">
        <div id="profile-image-upload" class="text-center">Change Avatar</div>
    </div>
    <div class="col-sm-9">
        <div class="form-group">
            <label>Name</label><br>
            <input type="text" id="fullName" name="fields[fullName]" value="{{ currentUser.fullName }}">
        </div>
        <div class="form-group">
            <label>Role</label><br>
            <input type="text" id="userRole" name="" value="Your Role here">
        </div>
        <div class="form-group">
            <label for="company">company</label><br>
            <input type="text" id="company" name="fields[company]" value="{{ currentUser.company }}">
        </div>
        <div class="form-group">
            <label for="email">email</label><br>
            <input type="text" id="email" name="fields[email]" value="{{ currentUser.email }}">
        </div>
    </div>
</div><!-- end row -->
<div class="form-group row">
    <div class="col-lg-11 offset-md-0">
        <input type="submit" value="Save Changes" id="saveProfile" class="dark-btn">

    </div>
</div>

$("#profile-form").submit( function(e) { e.preventDefault(); var data = $(this).serialize();

$.ajax({
    method: "POST",
    url: "users/save-user",
    data: data,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    success: function(data, response){

    }
});

});