file upload using jquery ajax

Question

I want to upload a image with a description like:

data = '{"filename":"' + myfilename + '", "file":"' + file + '", "description":"' +
    description + '"}';

$.ajax({
    type: "POST",
    url: "filehandler.ashx",
    data: data,
    success: function (result) {
        alert(result);
    },
    error: function () {
        alert("There was error uploading file!");
    }
});

how can I do it? I can't read file as HttpPostedFile in generic handler. context.Request.Form also doesn't have any keys.

Answer 1

I'm sorry, If I not posted fully what I did in question. Anyway I got it to work.

var data = new FormData();

data.append("name", filename);
data.append("file", file);

In generic handler

HttpPostedFile file = context.Request.Files["file"];
string fileName = context.Request.Form["filename"];

Using FormData Objects

Answer 2

you cant post files with ajax you have to post it in a iframe to have the same result

this is what I did

var form = "#myform";
var url = "http://post.it/";
var iframeName = 'iframePost' + (new Date()).getTime(); 
$('<iframe id="'+iframeName+'" name="' + iframeName + '" style="display:none;"/>').appendTo('body');
$(form).attr('target',iframeName)
    .attr('action',url)
    .attr('enctype','multipart/form-data')
    .append('<input type="hidden" name="_iframe" value="' + iframeName + '" />');
    form.submit();

to have a callback let the iframe return a script with something like

window.parent.callBack(data);