`
zzc1684
  • 浏览: 1229089 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

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

阅读更多

本周用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 plaincopy
  1. if (options.blob) {  
  2.                         formData.append(paramName, options.blob, file.name);  
  3.                     } else {  
  4.                         $.each(options.files, function (index, file) {  
  5.                             // This check allows the tests to run with  
  6.                             // dummy objects:  
  7.                             if (that._isInstanceOf('File', file) ||  
  8.                                     that._isInstanceOf('Blob', file)) {                                       
  9.                                 formData.append(  
  10.                                     ($.type(options.paramName) === 'array' &&  
  11.                                         options.paramName[index]) || paramName,  
  12.                                     file,  
  13.                                     file.uploadName || file.name  
  14.                                 );  
  15.                             }  
  16.                         });  
  17.                     }  

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

[javascript] view plaincopy
  1. file.uploadName || file.name  
很显然,这里并没有对这个文件名做任何编码处理,发送出去确实容易导致编码的问题。因此,就在这里用encodeURI()方法做一下处理:
[javascript] view plaincopy
  1. encodeURI(file.uploadName || file.name)  

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

 

然后在后台,用java.net.URLDecoder进行解码:
  1. fileName = URLDecoder.decode(fileDetail.getFileName(), "UTF-8");  
OK,正确输出:

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

 

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

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

 

分享到:
评论

相关推荐

    jQuery File Upload文件上传插件 v10.32.0.zip

    jQuery File Upload是一款功能强大的文件上传插件,专为前端开发者设计,用于在Web应用程序中实现高效、用户友好的多文件上传功能。这个插件的版本是v10.32.0,它提供了丰富的特性,使得文件上传变得更加简单且可控...

    jQuery File Upload 可跨域的多图片上传

    **jQuery File Upload 知识点详解** `jQuery File Upload` 是一个流行的JavaScript库,它允许用户在网页上实现多文件上传功能,特别是支持跨域上传,这对于现代Web应用来说至关重要。该框架以其易于使用、高度可...

    jQuery File Upload演示与下载

    《jQuery File Upload:全方位解析与实践指南》 在Web开发领域,jQuery库因其简洁的API和强大的功能而深受开发者喜爱。其中,jQuery File Upload插件是处理文件上传问题的一个高效解决方案,尤其在需要进行多文件...

    jQuery-File-Upload

    《jQuery File Upload详解:打造高效图片上传体验》 在网页应用中,图片上传功能是不可或缺的一部分,而jQuery File Upload插件则为开发者提供了一个强大且易用的解决方案。这款插件以其丰富的特性、广泛的语言支持...

    asp.net jquery file upload

    在"asp.net jquery file upload"的实现中,jQuery被用来处理用户界面交互,如选择文件按钮的点击事件、文件名和大小的显示、进度条的更新等。当用户选择文件后,Flash组件会被用来读取这些文件并进行异步上传。同时...

    jQuery File Upload 基于Jquery的图片上传组件

    **jQuery File Upload** 是一个强大的基于 **jQuery** 的图片上传插件,专为网页上的文件上传功能设计。它提供了一套完整的解决方案,包括多文件选择、上传进度显示、取消与删除上传任务、预览上传图片等功能,使得...

    jQuery-File-Upload asp.net MVC3 Demo

    "jQuery-File-Upload" 是一个著名的前端文件上传插件,尤其在Web开发领域中广泛应用。这个插件基于JavaScript库jQuery,提供了强大的功能,如多文件选择、文件预览、进度条显示、取消上传以及大文件分块上传等。在这...

    jquery-file-upload案例

    至此,一个基本的jQuery File Upload与Java后台交互的案例已经完成。当然,实际项目中可能还需要考虑更多细节,如文件大小限制、文件类型检查、错误处理等。这个案例提供了一个基础的框架,开发者可以根据自己的需求...

    Jquery file upload Mvc4.0实例

    【jQuery File Upload】是jQuery的一个插件,用于在网页上实现文件上传功能,它支持多文件选择、进度条显示、预览以及异步上传。在Mvc4.0框架下,结合jQuery File Upload可以构建高性能、用户体验优秀的文件上传系统...

    jQuery File Upload

    **jQuery File Upload** 是一个基于JavaScript的开源上传插件,专为jQuery框架设计,用于实现高效、可扩展的多文件上传功能。这个插件利用HTML5的File API,同时兼容那些不支持该API的浏览器,确保了广泛的应用性。...

    jQuery-File-Upload-Java-master.zip_file jquery ja_jQuery File Up

    《jQuery File Upload:Java 实例详解》 在Web开发中,文件上传功能是不可或缺的一部分,jQuery File Upload 是一个强大且用户友好的文件上传插件,它支持多文件选择、进度条显示、预览功能以及异步上传。这个名为 ...

    jQuery File Upload 基于Jquery的图片上传组件.zip

    《jQuery File Upload:基于jQuery的图片上传组件详解》 在Web开发中,用户交互体验是至关重要的,尤其是在处理文件上传时。jQuery File Upload是一个强大的、易于使用的插件,它允许用户方便地上传图片,同时也...

    jQuery-File-Upload-9.19.1.zip_jqueryfileupload jsp

    《jQuery File Upload 9.19.1:高效、灵活的文件上传解决方案》 在Web开发中,文件上传功能是不可或缺的一部分,而jQuery File Upload是一个非常流行且强大的文件上传插件,尤其适用于处理多文件上传和大文件上传的...

    jQuery File Upload 9.5.0 上传插件 非常好用

    1. **异步上传**:jQuery File Upload支持后台无刷新上传,用户可以继续浏览页面,而文件在后台上传,提升用户体验。 2. **多文件选择**:用户可以一次性选择多个文件进行上传,提高上传效率。 3. **进度显示**:...

    jQuery-File-Upload-9.11.2(完整版,插件已下载).zip

    jQuery-File-Upload-9.11.2(完整版,插件已下载),官方的很多引用文件都是线上的,加载很慢,下载到本地后更靠谱,这个版本是已经整理好的,直接调用后台php的部分也在其中,可以直接应用到项目中,直接拷贝过去就...

    jQuery-File-Upload插件

    jQuery File Upload是一款强大的基于jQuery的文件上传插件,它提供了多文件选择、进度条显示、预览、上传取消以及删除等功能。这款插件利用HTML5技术,为现代浏览器提供了先进的文件上传体验,同时通过优雅降级的...

    file-upload

    在本文中,我们将深入探讨“jQuery File Upload”这个强大的Jquery图片上传组件,以及它如何帮助实现高效且用户体验良好的文件上传功能。 jQuery File Upload是一个流行的JavaScript库,专为处理文件上传而设计。它...

Global site tag (gtag.js) - Google Analytics