encoding gets messed up when including file input in form

I'm having an issue with the encoding of input from form elements being messed up when I include a file input in my form. I'm using jquery and a servlet backend(and ajax call), but I dont see how this should have anything to do with it. HTML page encoding is set to UTF-8, and I specify the character encoding for the servlet request to use utf8 as well. When I remove the file input from the form, the encoding is allright.

When I investigate the headers for the request I see the following payload in firebug:

...
------WebKitFormBoundaryMxjJWBwBmPLxN623
Content-Disposition: form-data; name="createActivityTitleInputId"

æøåæøåæøåæøå
...

The content of the input should be æøåæøåæøå, and I do not know what the webkitformboundary stuff is...?

I would very much appreciate it if someone could help me with this problem.

Thanks :)

----- EDIT------

So I made a small test project to try to narrow down the issue. When I do not use ajax to post the form, everything works fine. If I however use the jQuery form plugin to submit the fo开发者_运维问答rm then encoding fails...

form.ajaxSubmit({ 
        dataType: 'json',
        data: data,
        type: 'POST',
        success: function(response) {
            successfunction(response);
        }
    });

Anyone have any experience using this plugin?

---

When I investigate the headers for the request I see the following payload in bugzilla:

Do you mean Firebug? Are you looking at the ‘post’ tab in the Net logging in Firebug?

Because if so what it does is to look at the entire form submission upload, and try to decode it—including the byte content of any uploaded files—as UTF-8. If that fails, it will fall back to the locale default encoding, typically Windows code page 1252 (similar to ISO-8859-1), to display the form submission content.

This doesn't change how the form was actually submitted! It's just Firebug's visualisation of that. Firebug doesn't actually know what character encoding was used to encode the form content, it's just guessing. In general a form submission does not carry any information to let the server (or Firebug) know what encoding is in use.

So if you submit a form with no file upload, or with a file upload where the file content itself is a valid UTF-8 sequence (including any ASCII-only file), Firebug will display the whole form submission as UTF-8 and so display the posted content as the characters you expected. If, on the other hand, there is a sequence in the bytes of the file that is not a valid UTF-8 sequence (which is very likely indeed for any binary file such as an image), Firebug will try to decode the bytes as UTF-8, fail, and fall back to cp1252.

This will give you a display of “æøåæøåæøåæøå”, even if the actual server will be reading that as UTF-8 and getting “æøåæøåæøå”. Firebug doesn't know the difference between text form submission values (which are characters) and file upload submission contents (which are bytes; they might also represent characters, but if so there is no guarantee that the uploaded file will be using the same encoding as the form).

I do not know what the webkitformboundary stuff is...?

In a MIME multipart/ structure, there is a boundary string that splits up each subpart. In multipart/form-data each subpart is a form field. The boundary string always begins with a newline then --, but then there's an arbitrary string chosen as the boundary, usually involving a random sequence of character unlikely to turn up in the data of the subpart itself.

The boundary string can be anything, and is specified in the Content-Type: multipart/form-data;boundary= parameter. WebKit browsers always use a boundary string starting with ----WebKitFormBoundary.

---

The WebKitFormBoundary text seems to be a known issue involving Safari - I'm not sure how these apply but here are a few links that turned up when I Google'd for that text:

• http://bbs.trailersailor.com/forums/potter/index.cgi/noframes/read/85098
• http://www.tandem-club.org.uk/cgi-bin/db_config.pl?noframes;read=12329
• http://discussions.apple.com/thread.jspa?threadID=2235190&tstart=0

---

OK...so I did a workaround. Instead of posting the form with ajaxsubmit, I use jquery ajax functionality and add every form elements value to the data part of the ajax request manually. This seems to solve the problem.

$.ajax({
        type: 'POST',
        url: action,
        data: params,
        dataType: 'json', 
        success: function(response, textStatus, XMLHttpRequest) {
            successfunction(response);
        }
    });