jquery File upload background received file name Chinese garbled, filename Chinese garbled

This week with jquery file upload to upload files, the background will accept the file, and intercept the file name as a character into the database. Basic ability to achieve time, try a few files, found if the file name if there is no Chinese is OK, if the file name with Chinese words, backstage received is Chinese garbled, how to decode is useless.

For example, the uploaded file is called " Xin Rui Configuration table. xls", but received in the background is " display 曢 攼 yan terrain", such as:

Does not seem to solve the problem of decoding.

So I want to find out which part of this file name is wrong. First write a simple HTML page, inside is the most original form form, and then submit backstage, found everything is normal, file name is right, so probably can judge and background irrelevant, it is likely that jquery file upload this plugin problem.

So, using the HTTP tool to observe the upload of the file transfer information, found the following problems, mainly postdata part of the content-disposition in the filename section:

This filename is normal when a native from is committed:

And with jquery file upload this plugin is submitted, this filename is already chaotic:

As a result, has successfully positioned the problem of the link, is in the jquery file upload this plugin problem. It is estimated that the author of this plugin did not consider the issue of character encoding.

The question of character encoding for JavaScript seems to have been touched a bit, as if it were similar to encodeURI () or encodeuricompent (). However, the primary task now is to find out which step of the Jquery.fileupload.js file This parameter is set for filename.

For two days, the test went to the test, and finally found the place: This JS has a member called _initxhrdata, is a function, in the last part of this function has a If-else branch, as follows:

if (Options.blob) {                        formdata.append (paramname, Options.blob, file.name);                    } else {                        $.each (options.files, function (index, file) {                            //This check allows the tests-to-run with                            //dummy objects:                            if (that._isinstanceof (' File ', file ' | |                                    That._isinstanceof (' Blob ', file)} {                                formdata.append (                                    $.type (options.paramname) = = = ' array ' &&                                        Options.paramname[index]) | | ParamName,                                    file,                                    file.uploadname | | file.name                                );                            }                        );                    }

The actual test shows that the program goes to the Else branch, and the last step in the Else branch, which is Formdata.append (), sets the filename to the last line.

File.uploadname | | File.name

Obviously, there is no encoding for this file name, and sending it out is really easy to cause coding problems. So, here's The encodeURI () method for processing:

encodeURI (File.uploadname | | file.name)

Then again, the filename in the HTTP message that was sent is converted to a string that has been encoded:

Then, in the background, decode with Java.net.URLDecoder:

FileName = Urldecoder.decode (Filedetail.getfilename (), "UTF-8");

OK, correct output:

This plugin caused by the Chinese garbled problem finally fix, spent a full 4 days!

Summary: A lot of problems seem to be completely impossible, but think about, in fact, we have a lot of practical tools, we have to do is to use these tools, seize every trace, firmly believe that there is no solution to the technical problems, step by step deduction, finally find the root cause of the problem, and to solve.

The so-called technical problems that cannot be solved are mostly due to the lack of familiarity with these technologies and related knowledge. As long as the relevant knowledge is abundant, the experience is enough, it will be easy to solve the specific problem.