Take the 2-minute tour ×

I have the following AJAX function with JQuery:

var formData = $('#FonykerEditForm').serialize();    
$.ajax ({
    type: 'POST',
    url: '<?php echo $html->url('/fonykers/edit',true); ?>',
    data: formData,
    dataType: 'json',
    success: function(response) {
        if(!response.ok) {
        } else {
            username = $('#FonykerUsername').val();
            email = $('#FonykerEmail').val();

    error: function (xhr, ajaxOptions, thrownError){

The problem I'm having is that a type file field in my form is not getting submitted along with the rest of the data of the form, how can I include the file in the data of the ajax request?

share|improve this question
Files cannot be sent this way using ajax. Use one of the many jquery plugins out there to do uploads. –  gAMBOOKa Aug 23 '11 at 17:08
If you really want to send a file via ajax, use HTML5 –  Tae-Sung Shin Aug 23 '11 at 17:13
You could set the target of the form to a hidden iFrame, then listen for the load event of the hidden iframe to see when it returns. You can then get the content from the body of the iframe as the response. –  Kevin B Aug 23 '11 at 17:25

2 Answers 2

up vote 1 down vote accepted

Like I said in the comment above, sending files via ajax is not straightforward. If you wish to try it anyway. The normal approach I've seen is to create a new iframe, add a file input field to it, select your file and submit it programmatically. This way, the iframe does the submission in the background.

Take a look at how this plugin does it:


share|improve this answer
Thanks dude, seems overly complicated for what I want to do, so I guess I'll desist on the ajax submission, the deal is that I'd like for the user to have a preview of the image he is setting and I'm no sure how to do this, since I'm using CakePHP and I'm fairy new to web dev in general so I don't really grasp the structure of how everything goes –  8vius Aug 23 '11 at 17:38
Right how I have a field in my user table that saves the path to the image, and in the rest of my project it just gets saved automatically when I submit the form (non AJAX) along with the rest of the form info, so if I upload the image beforehand I'm not sure on how to get the path to it afterwards. –  8vius Aug 23 '11 at 17:44
The plugin you use will generally provide a path to the file when it has been uploaded. If not, you can modify the server script to return the path. –  gAMBOOKa Aug 23 '11 at 17:46

Basically an AJAX will submit data in the form of key/value pairs.. Since files are binary data, you can't submit files using Ajax.. You'll need to submit the data using a standard form submit instead and on the server since accept a form/multipart

share|improve this answer

Your Answer


