如何在BootBox上通过Ajax在PHP中上传图像？

Question

I'm trying to upload image using ajax but i don't know why i couldn't achieve that, i already saw many examples, also i'm not getting ant data in formData in console. Thanks in Advance.

Here is my JS code:

$(document).on('click', '#btnInsertWorkingHours', function() {
    var $html='';
    $html += '<form id="newWorkingHours" class="js-exampleForm" action="" method="post" enctype="multipart/form-data">';
    $html += '<div class="panel-body">';
    $html += '<fieldset>';
    $html += '<div class="col-md-12">';
    $html += '<div class="row small">';
    $html += '<div class="col-sm-6 form-group">';
    $html += '<label><span class="required">*</span>&nbsp;Hours</label>';
    $html += '<input type="text" id="wh_hours" name="wh_hours" value="" autocomplete="off" class="form-control fPInteger"/>';
    $html += '</div>';
    $html += '<div class="col-sm-6 form-group">';
    $html += '<label><span class="required">*</span>&nbsp;Minutes</label>';
    $html += '<input type="text" id="wh_minutes" name="wh_minutes" value="" autocomplete="off" class="form-control fPInteger"/>';
    $html += '</div>';
    $html += '</div>';
    $html += '<div class="row small">';
    $html += '<div class="col-md-12 form-group">';
    $html += '<label><span class="required">*</span>&nbsp;Description</label>';
    $html += '<textarea id="wh_description" name="wh_description"  class="form-control wh_description"></textarea>';
    $html += '</div>';
    $html += '</div>';
    $html += '<div class="row small">';
    $html += '<div class="col-md-6 form-group">';
    $html += '<label><span class="required">*</span>&nbsp;Document</label>';
    $html += '<input type="file" class="form-control-file" id="wh_document" name="wh_document"/>';
    $html += '</div>';
    $html += '</div>';
    $html += '</div>';
    $html += '</fieldset>';
    $html += '</div>';
    $html += '</form>';

    var $box = bootbox.dialog({
    closeButton: false,
        message: $html,
        title: 'Add Working Hours',
        buttons: {
            success: {
                label: 'Save',
                className: "btn-success",
                callback: function() {

                    var $valid = jQuery('#newWorkingHours').valid();
                    var $form = $('#newWorkingHours');
                    var formData = new FormData($form);
                    console.log(formData); //NOT GETTING ANYTHING IN formData

                    if($valid) {
                        jQuery.ajax({
                            url: $UrlInsertWorkingHours,
                            dataType: 'json',
                            type: 'post',
                            data: formData,
                            enctype:'multipart/form-data',
                            cache:false,
                            contentType: false,
                            processData: false,
                            beforeSend: function() {
                                $('.bootbox .btn').prop('disabled',true);
                                $('.bootbox .btn-success').prepend('<span class="loader"><i class="fa fa-spinner fa-spin"></i></span>')
                            },
                            complete: function() {
                                jQuery('.wait').remove();
                                $box.modal('hide').destroy();
                            },
                            success: function(json) {

                            },
                            error: function(xhr, ajaxOptions, thrownError) {
                                console.log(xhr.responseText);
                            }
                        });
                    }
                    return false;
                }
            },
            danger: {
                label: 'Cancel',
                className: "btn-default"
            }
        }
    })

    $($box).find(function() {
        $('input[type="checkbox"].square').iCheck({
            checkboxClass: 'icheckbox_square-green',
            increaseArea: '20%'
        });
        $('.iCheck-Green').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
            increaseArea: '20%'
        });
    });
});

Answer 1

You can use FormData() form this purpose. You can save your file/image input like this

var file_data = jQuery('#image_input').prop('files')[0];
var form_data = new FormData();
form_data.append('image_input', file_data);

In order to append more values for example if you also want to add non file input to this.

var any_input_text = jQuery("#any_input_text").val();
form_data.append('ny_input_text', ny_input_text);

While passing it to ajax you can do it like this

data: form_data

While on php side you can simply access file elements as you do it normally