AJAX failing to upload blob image - ajax

Question

I have a problem with uploading a blob using ajax. I have tried many options and they are not working.
I must say that the same variables (albeit with different names) work when using php in the standard sense but not when using ajax.
Please help
The ajax code is:
$(function() {
$("#upload").click(function() {
// validate and process form here
var username = $("input#username").val();
var title = $("input#title").val();
var image = $("#image").get(0).files.item(0);
var information = tinymce.get('blogcontent').getContent();
var dt = new Date();
// variable for blog date and time
var dateandtime = dt.toLocaleString();
var dataString = 'username=' + username + '&title=' + title + '&image=' + image + '&information=' + information + '&dateandtime=' + dateandtime;
$.ajax({
type: "POST",
url: "functions/insertblogpost.php",
data: dataString,
success: function() {
$('#writeblog').html("<div id='message'></div>");
$('#message').html("<h2>User account created!</h2>")
.append("<p>Please go back to login.</p>")
.hide()
.fadeIn(1000, function() {
$('#message').append("<a href='../../Mobileapptemplate.php'>Back</a>");
});
}
});
return false;
});
});
And the php script is:
$connection = mysqli_connect($dbserver, $dbusername, $dbpassword, $database);
$username = $_POST[ 'username' ];
$blogTitle = $_POST["title"];
$blogContent = $_POST["information"];
$blogpicturename = $_FILES["image"]["name"];
$blogpicdata = mysqli_real_escape_string( $connection, file_get_contents($_FILES["image"]["tmp_name"]));
$blogpictype = $_FILES['image']['type'];
$dateAndTime = $_POST["dateandtime"];
$result = "INSERT INTO ct5006ho_users.$username ( postnumber, user, title,
picturename, picture, blogpost, dateandtime ) VALUES ( '', '$username', '$blogTitle','$blogpicturename',
'$blogpicdata','$blogContent', '$dateAndTime');";
//if (
mysqli_query($connection, $result);
The connection IS established fine and all other data uploads to the phpmyadmin created database. I have omitted those details from the code.

Answer 1

Here is the answer:
$(function() {
$("#upload").click(function() {
// validate and process form here
tinyMCE.triggerSave();
var form = $('form')[0]; //
var formData = new FormData(form);
$.ajax({
type: "POST",
url: "functions/insertblogpost.php",
data: formData, // Data sent to server, a se
contentType: false,
cache: false, // To unable request pages to be cached
processData:false,
success: function() { ....................
If anybody has a similar issue please use this experience to help you.
Note - tinyMCE.triggerSave(); - sends the tinyMCE data. and this was my original issue with the - data: formData,
Ah well, shoot me down for asking!