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.

@AmiramKorach I don't know how to write handler to get file and description separately. — Darshana, Aug 15 '12 at 07:37
With this code, I do not see how you could upload anything. Here is a post of a js object containing strings. Uploading a file cannot be achieved this way unfortunately. Basically it's the browser's job to set the file name (for security reasons). now maybe I did not got your snippet. — Flavien Volken, Aug 15 '12 at 08:18

score 5 · Accepted Answer · answered Aug 15 '12 at 10:31

5

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

answered Aug 15 '12 at 10:31

Darshana

2,462
6
28
54

Only work in recent browsers tho, but since IE10 now also works on Win7 it's usable :) – EaterOfCode Jul 01 '13 at 09:29

score 2 · Answer 2 · answered Aug 15 '12 at 08:35

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);

file upload using jquery ajax

2 Answers2