The file name received by the jquery file upload background is garbled in Chinese, and the filename is garbled in Chinese.

The file name received by the jquery file upload background is garbled in Chinese, and the filename is garbled in Chinese.

This week, the jquery file upload function is used to upload files. Files are accepted in the background and the file names are truncated and stored as characters in the database. When implementing basic functions, I tried several files and found that if the file name does not contain Chinese characters, it would be OK. If the file name contains Chinese characters, the background would receive Chinese garbled characters, and it would be useless to decode the file.

For example, the uploaded file is calledAcute configuration table .xls", But what is received in the background is"Why? Xls", Such:

It does not seem that decoding can solve the problem.

So I want to figure out which part of the file name has a problem. First, I wrote a simple html page with the most primitive FORM in it. Then I submitted the FORM to the background and found that everything is normal and the file name is correct. Therefore, I can probably judge that it is irrelevant to the background, this is probably because of the jquery file upload plug-in. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + 09rKx6Os08NodHRwuaS + 37nbsuzBy9K7z8LJz7SrzsS8/release + CjxwPjxpbWcgc3JjPQ = "http://www.2cto.com/uploadfile/Collfiles/20140801/2014080108475894.jpg" alt = "\">

When the jquery file upload plug-in is used for submission, the filename is messy:

As a result, we have successfully located the problem, that is, the problem with the jquery file upload plug-in. It is estimated that the author of this plug-in does not consider character encoding.

The question of javascript character encoding seems to have been touched by a bit, as if it is similar to the encodeURI () or encodeURICompent () methods. However, the primary task is to find out which step in the jquery. fileupload. js file sets the filename parameter.

After two days of testing, I finally found this place: This js has a member named _ initXHRData, which is a function, the last part of this function has an if-else branch, as shown below:

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 enters the else branch, and the last step in the else branch is formData. in the append () method, filename is set. The specific value is the value of the last row.

file.uploadName || file.name

Obviously, this file name is not encoded here, and sending it easily leads to Encoding Problems. Therefore, here we use the encodeURI () method for processing:

encodeURI(file.uploadName || file.name)

Then test again. The filename in the http message sent this time is changed to the encoded string:

Then, in the background, use java.net. URLDecoder for decoding:

fileName = URLDecoder.decode(fileDetail.getFileName(), "UTF-8");

OK, correct output:

The Chinese Garbled text problem caused by this plug-in finally took four days!

Conclusion: many problems seem completely unfeasible, but think about them carefully. In fact, we have a lot of practical tools in our hands. What we need to do is to make good use of these tools to catch every trace of the clues, I firmly believe that there are no technical problems that cannot be solved. I will deduce them step by step, find the root cause of the problem, and solve it.

Most of the technical problems that cannot be solved are due to insufficient familiarity with these technologies and related knowledge. As long as you have sufficient knowledge and experience, it is easy to solve specific problems.