I seriously need help uploading files in CI using jQuery AJAX!

[eluser]Sven Delle[/eluser]
I have a two div setup, where I have my main navigation on the left and all content on the right. I update the right div using jQuery AJAX calls to retrieve views of all kinds.

But I'm in a culprit when it comes to uploading files with jQuery AJAX, as it tends to use the post (or ajax) function which then receives some data back on success.

This is what I usually use to get data into my admin_view:

Code:

$('#admin_content').html('Getting data ...');
var data = {};
$('#admin_content').load(url, data, function(str) {
CKEDITOR.replace('content');
});

But a typical ajax call looks like this:

Code:

$('#new_record').submit(function(event) {
event.preventDefault();
var form_data = $('#new_record').serialize();
$.ajax({
  url: '<?php echo base_url(); ?>admin/insert_record/',
  type: "POST",
  data: form_data,
  success: function(msg)
   {
    alert('Success: ' + msg);
   }
  });
return false;
});

This kind of AJAX call cannot be used for sending file data, as it uses the XMLHttpRequest protocol which obviously cannot handle POST data of type 'file'.

So one is in for a bunch of weird hacks.

Does anyone know of a solution where I can both send data (from an ajax loaded view in a div) and get info back from the server into the same div?

I've been scratching my head for days trying to implement a dozen different solutions, but none seem to take into account, that using an ajax solution for file upload would tell them that then you might have this kind of setup in the first place.

So put simple:
How do upload file to server, and get response back into the same div the upload came from - that is NOT REFRESH the whole page (THE BLEEDIN' POINT OF AJAX!!!)