how to using image picker to send image to php file?

Question

i want to make image picker and send selected image via ajax or jquery (post) to php file.

according to this example i've created an form.

but this form just show and pick image and i can't using to send image file's to server now how i can send selected file via jquery or ajax ?

<style>
.img-upload-btn { 
    position: relative; 
    overflow: hidden; 
    padding-top: 95%;
} 

.img-upload-btn input[type=file] { 
    position: absolute; 
    top: 0; 
    right: 0; 
    min-width: 100%; 
    min-height: 100%; 
    font-size: 100px; 
    text-align: right; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    outline: none; 
    background: white; 
    cursor: inherit; 
    display: block; 
} 

.img-upload-btn i { 
    position: absolute;
    height: 16px;
    width: 16px;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
}

.btn-radio {
    position: relative; 
    overflow: hidden; 
}

.btn-radio input[type=radio] { 
    position: absolute; 
    top: 0; 
    right: 0; 
    min-width: 100%; 
    min-height: 100%; 
    font-size: 100px; 
    text-align: right; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    outline: none; 
    background: white; 
    cursor: inherit; 
    display: block; 
}

</style>

Javascript

<script>
(function ( $ ) {

    $.fn.imagePicker = function( options ) {

        // Define plugin options
        var settings = $.extend({
            // Input name attribute
            name: "",
            // Classes for styling the input
            class: "form-control btn btn-default btn-block",
            // Icon which displays in center of input
            icon: "glyphicon glyphicon-plus"
        }, options );

        // Create an input inside each matched element
        return this.each(function() {
            $(this).html(create_btn(this, settings));
        });

    };

    // Private function for creating the input element
    function create_btn(that, settings) {
        // The input icon element
        var picker_btn_icon = $('<i class="'+settings.icon+'"></i>');

        // The actual file input which stays hidden
        var picker_btn_input = $('<input type="file" name="'+settings.name+'" />');

        // The actual element displayed
        var picker_btn = $('<div class="'+settings.class+' img-upload-btn"></div>')
            .append(picker_btn_icon)
            .append(picker_btn_input);

        // File load listener
        picker_btn_input.change(function() {
            if ($(this).prop('files')[0]) {
                // Use FileReader to get file
                var reader = new FileReader();

                // Create a preview once image has loaded
                reader.onload = function(e) {
                    var preview = create_preview(that, e.target.result, settings);
                    $(that).html(preview);
                }

                // Load image
                reader.readAsDataURL(picker_btn_input.prop('files')[0]);
            }                
        });

        return picker_btn
    };

    // Private function for creating a preview element
    function create_preview(that, src, settings) {

            // The preview image
            var picker_preview_image = $('<img src="'+src+'" class="img-responsive img-rounded" />');

            // The remove image button
            var picker_preview_remove = $('<button class="btn btn-link"><small>Remove</small></button>');

            // The preview element
            var picker_preview = $('<div class="text-center"></div>')
                .append(picker_preview_image)
                .append(picker_preview_remove);

            // Remove image listener
            picker_preview_remove.click(function() {
                var btn = create_btn(that, settings);
                $(that).html(btn);
            });

            return picker_preview;
    };

}( jQuery ));

$(document).ready(function() {
    $('.img-picker').imagePicker({name: 'images'});
})

</script>

HTml

<div class="container"> 
    <br> 
    <div class="col-sm-8"> 
        <form> 
            <legend>Add Images</legend> 
            <div class="row">
                <div class="form-group col-sm-2"> 
                    <div class="img-picker"></div>
                </div> 

            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form> 
    </div> 
</div>