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

我认为我的架构也是错误的。我不知道如何在没有全局变量的情况下做到这一点。现在当我尝试发送我的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('');

//clearInputfields();

//successMessage();

},

error: function (jqXHR, textStatus, errorThrown) {

console.log("jqXHR: " + jqXHR);

console.log("textStatus: " + textStatus);

console.log("errorThrown: " + errorThrown);

}

});

}

});

})(jQuery);