How to upload Image files using AJAX in jQuery?

Web Development
, ,
1

I am trying to submit my form with ajax. I mean I want to send data to PHP without loading the page. I have a simple form the submission is working perfectly but the problem is I am not getting the images in PHP. How do I send images to the PHP file using Ajax?

Here is my form.

<form id="user-signup-form" enctype="multipart/form-data" action="/" method="post">
    <input type="text" name="username" />
    <input type="text" name="email" />
    <input type="password" name="password" />
    <input type="file" name="profile_picture" />
    <input type="submit" name="register" value="Register" />
</form>

And here is my jquery ajax code.

<script>
$(document).ready(function (e) {
    $('#user-signup-form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success:function(data){
                console.log(data);
            },
            error: function(data){
                console.log(data);
            }
        });
    });
});
</script>

Can anyone help me solve the problem?

2

You can send your data using JavaScript’s FormData and also set contentType and processData to false.

<script>
$(document).ready(function (e) {
    $('#user-signup-form').on('submit', function(e) {
        e.preventDefault();

        var formData = new FormData(this);

        $.ajax({
            type        : 'POST',
            url         : $(this).attr('action'),
            data        : formData,
            cache       : false,
            contentType : false,
            processData : false,
            success: function(data){
                console.log(data);
            },
            error: function(data){
                console.log(data);
            }
        });
    });
});
</script>