最近在做一个文件上传的功能,使用的是ajaxFileUpload作为前台上传功能,实际使用中发现问题有2个
1、file组件的change事件只能触发一次。
2、上传的中文名乱码
关于1:file组件的change事件触发一次是因为ajaxFileUpload在复制页面的file组件时候clone副本只克隆了dom并未clone事件导致被clone元素的事件只有第一次会发生变化。
在ajaxFileUpload的源代码中将 var newElement = jQuery(oldElement).clone(); 改动为 var newElement = jQuery(oldElement).clone(true); 就能够继续触发change事件了。
关于2:上传中文文件名在后台会读取到乱码的原因是ajaxFileUpload是使用内建iframe和form组件来完成异步刷新的,断点发现异步使用的form外部context的编码为GBK
但是我工程和request的编码都为UTF-8,这就导致了编码不一致而出现乱码,找到原因就在ajaxFileUpload的源码中,内建的form表单提交之前设置下外部的编码为UTF-8就能解决问题具体编码如下
var form = jQuery('#' + formId); jQuery(form).attr('action', s.url); jQuery(form).attr('method', 'POST'); jQuery(form).attr('target', frameId); if(form.encoding){ jQuery(form).attr('encoding', 'multipart/form-data'); } else { jQuery(form).attr('enctype', 'multipart/form-data'); } /*内建的dom默认编码方式为GBK需要改变为UTF-8才能使后台接收到的文件名不乱码*/ form.context.charset = "UTF-8"; jQuery(form).submit();
这样就能解决后台接受文件名乱码的问题了。
2015年7月16日18:24:24 编辑一下 原来之前的乱码 是因为spring里面freemarker的配置有问题导致的 并不需要改动js的源代码。。。。
将下面的配置GBK改为UTF-8即可