Where and how do I set the correct encoding when uploading files using xhr

问题

I am uploading image files, and I need them to work with accented characters - so I have made everything use UTF-8.

I use this javascript function to upload them:

     $('#files').change(function(e) {
            var formData = new FormData();
            for (var i=0; i<this.files.length;i++){
                formData.append(this.files[i].name, this.files[i]);
            }
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(e) {
                if ( 4 == this.readyState ) {
                    showMessage("Uploaded.");
                }
            };
            xhr.open('post', 'accoms/upload.jsp', true);
            xhr.send(formData);
        }, false);

So if I have a file named "Björk.jpg" for example, when I look at what gets sent to the server using FireFox Firebug it shows as:

Content-Disposition: form-data; name="BjÃ¶rk.jpg"; filename="BjÃ¶rk.jpg"

and that seems to be what the server receives.

The encoding for the post shows as this:

Content-Type    text/html;charset=UTF-8

When I send regular form data input text in other forms, it sends, and the server receives, the word "Björk" correctly.

Here is the server-side code in case its that:

mpp=new MultipartParser(request, 100000000);
com.oreilly.servlet.multipart.Part part;
FilePart fp=null;
String fileName="";
files=new ArrayList();
while((part=mpp.readNextPart())!=null){
    if (part.isFile()){
        fp=(FilePart)part;
        fileName=fp.getFileName();
        File file=new File(fileName);
        long size=fp.writeTo(file);
                    files.add(file);
            }
}

Any ideas?

Thanks.

回答1:

The parser uses its own encoding as is evident from the API reference.

Try:

mpp = new MultipartParser(request, 100000000);
mpp.setEncoding("UTF-8");
//rest of your code

The reference recommends passing it in constructor though:

mpp = new MultipartParser(request, 100000000, true, true, "UTF-8");

回答2:

You can set encoding like this

var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
// retrieve data unprocessed as a binary string
oReq.overrideMimeType("text/plain; charset=x-user-defined");

Some more info can be found here https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest

回答3:

The issue is most likely in your server-side code. Perhaps you are not taking into account that the filename is UTF-8 encoded. Nothing you posted in your question suggests that the name is being sent incorrectly. What you see in Firebug is not necessarily what is being sent. It's very possible that the default encoding being used by Firebug when examining the request does not match the encoding in use by the browser. This would explain why the filename looks garbled in Firebug.

来源：https://stackoverflow.com/questions/15955159/where-and-how-do-i-set-the-correct-encoding-when-uploading-files-using-xhr

标签

javascript

encoding

utf-8

multipartform-data