jquery file upload 后台收到的文件名中文乱码， filename中文乱码

原文链接：http://blog.csdn.net/zhouyingge1104/article/details/38322403

本周用jQuery file upload做上传文件的功能，后台会接受文件，并且截取文件名作为字符存入数据库。基本功能实现时候，试了几个文件，发现如果文件名如果没有中文就OK，如果文件名带中文的话，后台收到的就是中文乱码，怎么去解码都没用。

例如，上传的文件叫做“昕锐配置表.xls”，但是到后台收到的却是 “鏄曢攼閰岖疆琛?xls” ，如下图：

似乎也不是解码能解决的问题。

于是乎想弄清楚这个文件名是在哪个环节出问题的。首先写了一个最简单的html页面，里面就是最原始的FORM表单，然后提交后台，发现一切正常，文件名是对的，因此大概可以判断和后台无关，很可能就是jquery file upload这个插件的问题。

于是，用http工具观察了一下上传文件时传输的信息，发现如下问题，主要是POSTDATA部分的Content-Disposition中的filename部分：

原生的FROM提交时，这个filename是正常的：

而用jquery file upload这个插件提交时，这个filename就已经乱了：

于是乎，已经成功地定位了问题产生的环节，就是在jquery file upload这个插件的问题。估计是这个插件的作者没怎么考虑字符编码的问题。

关于JavaScript的字符编码问题，好像曾经也接触过一点，好像是类似于 encodeURI() 或者 encodeURICompent() 这些方法。不过，现在首要的任务是找出jquery.fileupload.js这个文件中是哪一步设置了 filename 这个参数。

整整两天，测试来测试去，最终找到了这个地方：这个js中有个成员叫做 _initXHRData， 是一个function， 在这个function的最后部分有一个if-else分支，如下：

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
                                );
                            }
                        });
                    }

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
                                );
                            }
                        });
                    }

实际测试表明，程序会进入else这个分支，并且，else分支中的最后一步，也就是formData.append()这个方法中会对 filename 进行设置，具体的值就是最后一行的

file.uploadName || file.name

file.uploadName || file.name

很显然，这里并没有对这个文件名做任何编码处理，发送出去确实容易导致编码的问题。因此，就在这里用encodeURI()方法做一下处理：

encodeURI(file.uploadName || file.name)

encodeURI(file.uploadName || file.name)

然后再次测试，这次发送的http信息中的filename就变成了进行编码处理过的字符串：

然后在后台，用java.net.URLDecoder进行解码：

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

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

OK，正确输出：

这个插件导致的中文乱码问题终于搞定，花了整整4天了！

总结：很多问题看上去完全是无从下手，但仔细想想，其实我们手上有很多实用的工具，我们要做的就是利用好这些工具，抓住每一点蛛丝马迹，坚信没有解决不了的技术问题，一步一步进行推导，最终找到问题的根源，并加以解决。

所谓解决不了的技术问题，多半是因为对这些技术以及相关的知识不够熟悉罢了。只要相关的知识够丰富，经验够多，解决特定的问题会很轻松。