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
– Darshana, Commented Aug 15, 2012 at 7: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
– Flavien Volken, Commented Aug 15, 2012 at 8:18

Darshana · Accepted Answer · 2012-08-15 10:31:54Z

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, 2012 at 10:31

Darshana

2,5486 gold badges30 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

EaterOfCode Over a year ago

Only work in recent browsers tho, but since IE10 now also works on Win7 it's usable :)

EaterOfCode · Accepted Answer · 2012-08-15 08:35:37Z

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

answered Aug 15, 2012 at 8:35

EaterOfCode

2,2423 gold badges21 silver badges34 bronze badges

Collectives™ on Stack Overflow

file upload using jquery ajax

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related