jquery file upload 后台收到的文件名中文乱码, filename中文乱码
2016-06-03 17:25
501 查看
原文链接: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分支,如下:
[javascript]
view plain
copy
print?
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 进行设置,具体的值就是最后一行的
[javascript]
view plain
copy
print?
file.uploadName || file.name
很显然,这里并没有对这个文件名做任何编码处理,发送出去确实容易导致编码的问题。因此,就在这里用encodeURI()方法做一下处理:
[javascript]
view plain
copy
print?
encodeURI(file.uploadName || file.name)
然后再次测试,这次发送的http信息中的filename就变成了进行编码处理过的字符串:
然后在后台,用java.net.URLDecoder进行解码:
[java]
view plain
copy
print?
fileName = URLDecoder.decode(fileDetail.getFileName(), "UTF-8");
OK,正确输出:
这个插件导致的中文乱码问题终于搞定,花了整整4天了!
总结:很多问题看上去完全是无从下手,但仔细想想,其实我们手上有很多实用的工具,我们要做的就是利用好这些工具,抓住每一点蛛丝马迹,坚信没有解决不了的技术问题,一步一步进行推导,最终找到问题的根源,并加以解决。
所谓解决不了的技术问题,多半是因为对这些技术以及相关的知识不够熟悉罢了。只要相关的知识够丰富,经验够多,解决特定的问题会很轻松。
本周用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分支,如下:
[javascript]
view plain
copy
print?
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 进行设置,具体的值就是最后一行的
[javascript]
view plain
copy
print?
file.uploadName || file.name
file.uploadName || file.name
很显然,这里并没有对这个文件名做任何编码处理,发送出去确实容易导致编码的问题。因此,就在这里用encodeURI()方法做一下处理:
[javascript]
view plain
copy
print?
encodeURI(file.uploadName || file.name)
encodeURI(file.uploadName || file.name)
然后再次测试,这次发送的http信息中的filename就变成了进行编码处理过的字符串:
然后在后台,用java.net.URLDecoder进行解码:
[java]
view plain
copy
print?
fileName = URLDecoder.decode(fileDetail.getFileName(), "UTF-8");
fileName = URLDecoder.decode(fileDetail.getFileName(), "UTF-8");
OK,正确输出:
这个插件导致的中文乱码问题终于搞定,花了整整4天了!
总结:很多问题看上去完全是无从下手,但仔细想想,其实我们手上有很多实用的工具,我们要做的就是利用好这些工具,抓住每一点蛛丝马迹,坚信没有解决不了的技术问题,一步一步进行推导,最终找到问题的根源,并加以解决。
所谓解决不了的技术问题,多半是因为对这些技术以及相关的知识不够熟悉罢了。只要相关的知识够丰富,经验够多,解决特定的问题会很轻松。
相关文章推荐
- jQuery $.post()返回类型为json时不进入回调函数的原因及解决方法
- jQuery选择器大全整理
- jQuery选择器大全整理
- jQuery中Ajax事件顺序及各参数含义
- 使用jquery中height()方法获取各种高度大全
- jquery 解析json文件
- JavaScript jQuery 入门回顾
- jquery.tmpl()小例子2
- jquery.teml()小例子
- jQuery深入之源码解析(二)——自调用匿名函数
- jquery固定表头和列头
- JQuery中ajax处理跨域的三大方式
- jQuery .tmpl(), .template()学习
- 亲测!Jquery2.0不支持IE8-了
- jquery模板jquery.tmpl.js使用教程
- Jquery根据name取得所有选中的Checkbox值
- jQuery深入之源码解析(一)
- JQuery 复制粘贴上传图片插件(textarea 和 tinyMCE)
- jquery获取div下标签
- jquery 获取元素下的子元素