form-ajax-submiter.js

function progressHandler(event){
    $("#kb_of_total").text("Uploaded "+Math.round(event.loaded/1024) +" kb of "+Math.round(event.total/1024));
    var percent = (event.loaded / event.total) * 100;
    $("#progressBar").attr('value', Math.round(percent));
    $("#status").text(Math.round(percent)+"% uploaded... please wait");
}
function completeHandler(event){
    $("#progressBar").attr('value', 100);
    $("#status").text('Uploaded Success');
    successHandler(event);

}
function successHandler(event){
    return;
}
function errorHandler(event){
    $("#status").text("Upload Failed");
}
function abortHandler(event){
    $("#status").text("Upload Aborted");
}
$(document).ready(function(){
    $(document).on('submit', '.ajax_submit', function(e){
        e.preventDefault();
        var formData = new FormData($(this));
        var ajax = new XMLHttpRequest();
        var files_inputs = $(this).find("input[type='file']");
        $.each(files_inputs, function(key, input){
            formData.append($(input).attr('name'), $(input).get(0).files[0]);
        });
       
        ajax.upload.addEventListener("progress", progressHandler, false);
        ajax.addEventListener("load", completeHandler, false);
        ajax.addEventListener("error", errorHandler, false);
        ajax.addEventListener("abort", abortHandler, false);
        ajax.open("POST", $(this).attr('action'));
        ajax.send(formData);
    });
});

form.html

<form class="ajax_submit" action="test.php">
    <input type="file" name="my_file"/>
    <button type="submit">Submit</button>
</form>