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

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

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.

So I used the http tool to observe the information transmitted during file upload and found the following problems: mainly the filename part in Content-Disposition of POSTDATA:

During native FROM commit, this filename is normal:

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.

Jquery uploadfiy multi-File Upload, struts1 background file name Chinese garbled, solution, front-end gbk

The following is a summary of some problems I encountered during the development process:
1. Upload failure I/O ERROR ------ test whether the configuration is servlet or pay attention to the flash version
2. garbled Chinese parameters passed by the front-end --------- this may vary depending on the application server... anyway, as long as our interface, interface parameter passing, and the encoding settings received by the background are consistent, there should be no problem above .. this problem is well solved...
3. During batch upload, only the name parameter sent from the front end can be received when the first attachment is uploaded, and the subsequent parameters are null ------- set 'simuploadlimit ': 1, // The number of files uploaded simultaneously is 1. The problem is solved... at the beginning, this problem had been difficult for me for a long time! Fuck
Source: blog.csdn.net/..091013

Jquery asynchronously submits Chinese garbled characters. The data submitted to the background is displayed normally, but the data submitted to the background is returned to the foreground, and the foreground Chinese garbled characters

The background and front-end encoding is not uniform, the solution is unified encoding, such as using UTF-8