如何使用图像选择器将图像发送到php文件？

Question

我想制作图片选择器，并通过ajax或jquery（post）将所选图片发送到php文件。

根据this example我创建了一个表单。

但此表单只显示并选择图片，我无法使用发送图片文件到服务器 现在我如何通过jquery或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>