Question

Hi Im having some issues getting a file attaced to a form to submit on jquery .post().

What i want to do is, user choose a file / the form submit using jquery .post(). I got it working fine if i just do a .submit() on the whole form, but i dont want to use it because of other content on the site. here is the code i use now. what this does is use a button as file input and i do the submit on the choose function right away.

$('.upload').file().choose(function (e, input) {                
            input.attr('name', 'firstPicture');
            input.hide();

            $(input).appendTo('#myForm');

            $('#hiddenDiv').show();

            $.post("/Home/UploadSingelFile", $("#myForm").serialize());
            return false;
        });

my action is correct public ActionResult UploadSingelFile(HttpPostedFileBase firstPicture)

what happends when i do like above is that the firstPicture input is null, but like i said if i do the submit its ok.

if this is not possible do im thinking of doing a .submit() but then i need to return a partialview and how would i go about to update that partialview into a div on the return? just like microsofts ajax.form got a updatetarget (i dont want to use their ajax form)

Answer 1

When sending an AJAX request using jQuery you are simply sending a application/x-www-form-urlencoded request to the server whereas in order to upload a file you need to use a multipart/form-data request.

There are some plugins such as jquery form which emulate this functionality by using a hidden iframe. So basically you will write the following to ajaxify the form containing file inputs:

$(function() {
    $('#myForm').ajaxForm(function(result) {
        // do something with the results when the form is submitted
    });
});

and then when you need to submit the form:

$('#myForm').ajaxSubmit();

or simply when the user presses the submit button.

There are also other plugins such as Uploadify and Plupload which would allow yoiu to achieve the same (Uploadify for example uses Flash, while Plupload detects what the client supports: Flash, Silverlight and if not it may fallback to hidden iframes to simulate the file upload).

But you may simply forget about uploading files with $.post.

---

UPDATE:

As @Can Gencer points out in the comments section there’s also the Ajax upload plugin which could be used.