如何在ajax请求中发送图像？

Question

我认为我的架构也是错误的。我不知道如何在没有全局变量的情况下做到这一点。现在当我尝试发送我的ajax请求时，我得到Uncaught TypeError: Illegal invocation。我认为错误的是我无法通过我的ajax请求发送一个对象。

我的代码：

(function ($) {
    $( document ).ready(function() {

        var file;

        // load the picture
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (event) {
                    $('#imageChosen').attr('src', event.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
        //Display the picture
        $('#fileInput').change(function(){
            file = this;
            readURL(this);
        });

    $( "#order_button" ).on( "click", function() {
        var name = $('#name').val();
        var email = $('#email').val();
        var address = $('#address').val();
        var co_address = $('#co_address').val();
        var city = $('#city').val();
        var image = file.files[0];

        updateDB(name, email, address, co_address, city, image);
    });

        //update database with posted values
        function updateDB(name, email, address, co_address, city, image){
            $.ajax({
                url: '/wp-admin/admin-ajax.php',
                type: 'POST',
                dataType: 'json',
                data: {
                    action: 'det_lilla_extra',
                    image: image,
                    name: name,
                    email: email,
                    address: address,
                    co_address: co_address,
                    city: city
                },
                success: function (data) {
                    console.log("success: " + data);
                    $('.block-center').append('<i class="fa fa-check fa-4x" aria-hidden="true">');
                    //clearInputfields();
                    //successMessage();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log("jqXHR: " + jqXHR);
                    console.log("textStatus: " + textStatus);
                    console.log("errorThrown: " + errorThrown);
                }
            });
        }

    });
})(jQuery);