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

我正在尝试使用ajax上传图像，但我不知道为什么我不能做到这一点，我已经看到了很多例子，而且我没有在控制台的

formData

中获取ant数据。提前谢谢

以下是我的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%'
        });
    });
});

$（文档）。在（'click'，'btn插入工作时间'，函数（）{
var$html=''；
$html+=''；
$html+=''；
$html+=''；
$html+=''；
$html+=''；
$html+=''；
$html+='*Hours'；
$html+=''；
$html+=''；
$html+=''；
$html+='*Minutes'；
$html+=''；
$html+=''；
$html+=''；
$html+=''；
$html+=''；
$html+=“*说明”；
$html+=''；
$html+=''；
$html+=''；
$html+=''；
$html+=''；
$html+='*文件'；
$html+=''；
$html+=''；
$html+=''；
$html+=''；
$html+=''；
$html+=''；
$html+=''；
var$box=bootbox.dialog({
closeButton:false，
信息：$html，
标题：“增加工作时间”，
按钮：{
成功：{
标签：“保存”，
类名：“btn成功”，
回调：函数（）{
var$valid=jQuery（'#newWorkingHours'）.valid（）；
var$form=$（'newWorkingHours'）；
var formData=新formData（$form）；
console.log（formData）；//在formData中没有获取任何内容
如果（$有效）{
jQuery.ajax({
url:$UrlInsertWorkingHours，
数据类型：“json”，
键入：“post”，
数据：formData，
enctype:“多部分/表单数据”，
cache:false，
contentType:false，
processData:false，
beforeSend:function（）{
$（'.bootbox.btn'）.prop（'disabled'，true）；
$（'.bootbox.btn success'）.prepend（''）
},
完成：函数（）{
jQuery（'.wait'）.remove（）；
$box.modal（'hide'）.destroy（）；
},
成功：函数（json）{
},
错误：函数（xhr、ajaxOptions、thrownError）{
console.log（xhr.responseText）；
}
});
}
返回false；
}
},
危险：{
标签：“取消”，
类名：“btn默认值”
}
}
})
$（$box）.find（函数（）{
$（'input[type=“checkbox”].square'）。i选中({
checkboxClass:'icheckbox_square-green'，
增加面积：“20%”
});
$（'.iCheck绿色'）.iCheck({
checkboxClass:'icheckbox_square-green'，
无线电课堂：“伊拉迪奥广场-绿色”，
增加面积：“20%”
});
});
});

您可以使用

FormData（）

实现此目的。您可以这样保存

文件/图像

输入

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

data: form_data

为了附加更多的值，例如，如果您还想将非文件输入添加到此文件

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

在将其传递给ajax时，您可以这样做

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

data: form_data

在php端，您可以像平常一样简单地访问文件元素

您可以使用

FormData（）

来实现此目的。您可以这样保存

文件/图像

输入

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

data: form_data

为了附加更多的值，例如，如果您还想将非文件输入添加到此文件

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

在将其传递给ajax时，您可以这样做

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

data: form_data

---

在php端，您可以像平常一样简单地访问文件元素

在

console.log（file\u data，form\u data）中，可能重复的文件元素不起作用

，

文件数据未定义

，

表单数据为空

。如何工作

控制台.log（文件数据，表单数据）？在
console.log（文件数据、表单数据）中，它不工作
，
文件数据未定义
，
表单数据为空
。如何工作
控制台.log（文件数据，表单数据）？