Sending file with form data using AJAX

Question

Below is an HTML form I have created, when the user clicks submit the form data is submitted to the server via AJAX.

I have a file input control in that form but the file data does not get submitted too. I want to know how I can modify my existing code to allow the file to be sent to the server too.

Below is my HTML:

<form method="post" action="profile.php" enctype="multipart/form-data" class="form-horizontal" >
    <fieldset>

        <!-- Form Name -->
        <legend>Complete Your Profile</legend>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-3 control-label" for="Fullname">Fullname</label>
            <div class="col-md-6">
                <input id="Fullname" name="Fullname" placeholder="" class="form-control input-md" required="" type="text">
            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-3 control-label" for="DoB">Date of Birth</label>
            <div class="col-md-6">
                <input id="DoB" name="DoB" placeholder="" class="form-control input-md" required="" type="text">

            </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-3 control-label" for="Displayname">Display Name</label>
            <div class="col-md-6">
                <input id="Displayname" name="Displayname" placeholder="" class="form-control input-md" required="" type="text">

            </div>
        </div>

        <!-- File Button -->
        <div class="form-group">
            <label class="col-md-3 control-label" for="btnImage">Display Pic</label>
            <div class="col-md-6">
                <input type="file" name="Displaypic">
            </div>
        </div>

        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-3 control-label" for="Gender">Gender</label>
            <div class="col-md-6">
                <label class="radio-inline" for="Gender-0">
                    <input type="radio" name="Gender" id="Gender-0" value="Male" checked="checked">Male
                </label>
                <label class="radio-inline" for="Gender-1">
                    <input type="radio" name="Gender" id="Gender-1" value="Female">Female
                </label>
            </div>
        </div>

        <!-- File Button -->
        <div class="form-group">
            <label class="col-md-3 control-label" for="btnImage"></label>
            <div class="col-md-6">
                <input type="submit" name="btnSubmit" value="Finish" id="btnSubmit" class="btn-style-red" />&nbsp;<img src="img/loading.gif" class="loading"/>
            </div>
        </div>
        <input type="hidden" name="UserID" value="<?php echo $curruser[0]; ?>" />
    </fieldset>

    <span>
</form>

Next is my JS:

$(document).ready(function() {
        $("#DoB").datepicker({
            inline: true
        });

        $('form').on('submit', function(e) {
            $(".loading").css("display", "block");
            e.preventDefault();

            $.ajax({
                type: 'post',
                url: 'profile.php',
                data: $('form').serialize(),
                success: function() {
                    $(".ui-msg-success").css("display", "block");
                    $(".loading").css("display", "none");

                    var start = 3;
                    $(".timer").html(start);

                    function timerRedirect(url) {
                        count = parseInt($(".timer").html());
                        count = count - 1;
                        $(".timer").html(count);

                        if (count == 0) {
                            window.location.href = "index.php";
                        }
                    }

                    setInterval(timerRedirect, 1000);
                }
            });

        });

Please note that I have seen and tried several answers on Stack Overflow, including the one listed as a possible duplicate, and other sites but they did not work for me. I would like to modify this code to accept file inputs and post to the server, and I would like to know if this is possible without rewriting and trying to integrate someone else's code into my application.

possible duplicate of [Sending multipart/formdata with jQuery.ajax](http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax) — Nitish Dhar, May 25 '14 at 16:43
No it is not, i am looking for a way of integrating the solution into the code i have already written, if that is possible. — Blank EDjok, May 25 '14 at 19:00
Pleased you solved it! Just so you know, it's worth avoiding the phrase "X did/does not work", since (by itself) it does not illuminate what problem you had with something. Some readers here have labelled this phrase as "the least informative failure report possible" and it's not hard to see why! If something did/does not work, do a bit of debugging if you can - using alert boxes, JS console, AJAX monitor etc. The more data you can provide on the problem, the more likely it is that someone will work out what advice you need. — halfer, May 25 '14 at 22:09

score 0 · Answer 1 · answered May 25 '14 at 20:39

I found the answer i was looking for here: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

Even though i couldn't modify my existing code this is still shorter and much more simpler to understand than the other solutions i found online (most of which do not work, or only work on certain browsers)

Sending file with form data using AJAX

1 Answers1