Как загрузить изображение через Ajax в PHP на BootBox? - PullRequest
Новая
       21

Как загрузить изображение через Ajax в PHP на BootBox?

1 голос
/ 23 апреля 2019

Я пытаюсь загрузить изображение, используя ajax, но я не знаю, почему я не смог этого добиться, я уже видел много примеров, также я не получаю данные ant в formData в консоли. Заранее спасибо.

Вот мой код JS: 

$(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%'
        });
    });
});

1 Ответ

0 голосов
/ 23 апреля 2019

Вы можете использовать FormData() для этой цели.Вы можете сохранить свой ввод file/image следующим образом: 

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

Для добавления дополнительных значений, например, если вы также хотите добавить к этому не входной файл. 

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

При передачеэто на ajax, вы можете сделать это так

...