使用AJAX发送图像

Question

我在使用Ajax传递dropify输入信息时遇到了麻烦。它会发送除图像之外的所有数据。

HTML：

<form class="js-validation-addlang" method="post" enctype="multipart/form-data" id="add-lang-form">
  <div class="form-group row">
    <label class="col-6 col-form-label">Language Name</label>
    <label class="col-6 col-form-label">Language Code</label>
    <div class="col-md-6">
      <div class="input-group">
        <input type="text" class="form-control" id="lang_name" name="lang_name">
        <span class="input-group-addon"><i class="fa fa-file"></i></span>
      </div>
    </div>
    <div class="col-md-6">
      <div class="input-group">
        <input type="text" class="form-control" id="lang_code" name="lang_code">
        <span class="input-group-addon"><img src="/assets/img/flags/def.png" id="flag-icon"></span>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-12" for="lang_tags">Language Tags</label>
    <div class="col-lg-12">
      <div class="input-group">
        <input type="text" class="form-control" id="lang_tags" name="lang_tags">
        <span class="input-group-addon"><i class="fa fa-list"></i></span>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-12">Image</label>
    <div class="col-md-12">
      <input type="file" id="lang_img" name="lang_img" class="dropify" />
    </div>
  </div>
  <div class="form-group row">
    <div class="col-md-12">
      <button type="submit" class="btn btn-alt-primary pull-right">Submit</button>
    </div>
  </div>
</form>

JS：

var data = $("#add-lang-form").serialize();
    $.ajax({ url: 'My_PHP_FILE',
        data: {
            dados: JSON.stringify(data),
            caller: 'addlang',
        },
        type: 'POST',
        beforeSend: function(){
            $("#add_btn").html('<i class="fa fa-2x fa-cog fa-spin"></i>');
            $("#add_btn").attr("disabled", true);
        },
        success: function(output) {
...

在var＆＃34; dados＆＃34;我有lang_name，lang_tags和lang_code的所有信息，但缺少id lang_img的文件输入。

我在这里失踪了什么？希望你能帮助我。感谢。

编辑： 完整代码：

var OpAuthValAddLang = function() {
// Init Sign In Form Validation, for more examples you can check out https://github.com/jzaefferer/jquery-validation
var initValidationAddLanguage = function(){
    jQuery('.js-validation-addlang').validate({
        errorClass: 'invalid-feedback animated fadeInDown',
        errorElement: 'div',
        errorPlacement: function(error, e) {
            jQuery(e).parents('.form-group > div').append(error);
        },
        highlight: function(e) {
            jQuery(e).closest('.form-group').removeClass('is-invalid').addClass('is-invalid');
        },
        success: function(e) {
            jQuery(e).closest('.form-group').removeClass('is-invalid');
            jQuery(e).remove();
        },
        rules: {
            'lang_name': {
                required: true
            },
            'lang_code': {
                required: true,
                minlength: 2
            },
            'lang_tags': {
                required: true
            },
            'lang_img': {
                required: true
            }
        },
        messages: {
            'lang_name': {
                required: 'Please enter a Language Name',
            },
            'lang_code': {
                required: 'Please provide a Language Code',
                minlength: 'The Language Code should have at least 2 characters'
            },
            'lang_tags' : {
                required: 'Please insert Language tags',
            },
            'lang_img' :{
                required: 'Please select the image to upload',
            }
        },
        submitHandler: AddLang
    });
};

function AddLang()
 {
    event.preventDefault();
    //var data = $("#add-lang-form").serialize();
    var form  = document.getElementById('add-lang-form');
    var formData = new FormData(form);

    $.ajax({ url: 'PHP_FILE',
        data: {
            //dados: JSON.stringify(data),
            dados: formData, 
            caller: 'addlang',
        },
        processData: false,  // tell jQuery not to process the data
        contentType: false,   // tell jQuery not to set contentType
        type: 'POST',
        beforeSend: function(){
            $("#login_btn").html('<i class="fa fa-2x fa-cog fa-spin"></i>');
            $("#login_btn").attr("disabled", true);
        },
        success: function(output) {
            if(output == "OK"){
                alert("OK");
            }else{
            $("#login_btn").html('<i class="si si-login mr-10"></i> Sign In');
            $("#login_btn").attr("disabled", false);
                    $.notify({
                        // options
                        icon: 'fa fa-close',
                        title: 'Error',
                        //message: 'It seems everything went ok :)',
                        message: output,
                    },{
                    // settings
                    element: 'body',
                    position: null,
                    type: "danger",
                    allow_dismiss: true,
                    newest_on_top: true,
                    placement: {
                        from: "top",
                        align: "right"
                    },
                    offset: 20,
                    spacing: 10,
                    z_index: 1031,
                    delay: 10000,
                    timer: 1000,
                    url_target: '_blank',
                    mouse_over: null,
                    animate: {
                        enter: 'animated fadeInDown',
                        exit: 'animated fadeOutUp'
                    },
                    onShow: null,
                    onShown: null,
                    onClose: null,
                    onClosed: null,
                    icon_type: 'class',
                    template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' +
                        '<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +
                        '<span data-notify="icon"></span> ' +

                        '<span data-notify="title"><strong>{1}</strong></span> ' +
                        '<span data-notify="message">{2}</span>' +
                        '<div class="progress" data-notify="progressbar">' +
                            '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
                        '</div>' +
                        '<a href="{3}" target="{4}" data-notify="url"></a>' +
                    '</div>' 
                });     
            }  

        }
});
 };

return {
    init: function () {
        // Init Sign In Form Validation
        initValidationAddLanguage();
    }
};
}();

// Initialize when page loads
jQuery(function(){ OpAuthValAddLang.init(); });

如果有人可以帮助我，我会很感激。 我对JS的了解并不好。