uploadify是使用比较广泛的一款jquery文件上传插件,该插件基于jquery开发,配合flash实现了多文件上传、上传进度可视化等功能。可惜的是,在初次尝试过程中,我发现uploadify插件提供的功能按钮对于中文支持并不是很好。
uploadify插件的参数中有buttonText参数,通过该参数可以指定最终显示的上传按钮上显示的文本内容,单直接幅值中文给buttonText参数,会发现最终显示要不是乱码,要不就是干脆不显示。通过对uploadify插件的分析,最终,找到了解决的方法。
uploadify插件的功能按钮是通过一个flash显示的,不是html的dom元素,而按钮上的文字是通过uploadify插件的参数传递给flash里显示。那么最终显示的实现还是在flash里,不是因为uploadify的js代码作用的。uploadify是开源的,他提供有该flash动画的源代码,打开uploadify目录中的uploadify.fla源文件,按下f9打开actionScript代码,会在116行左右发现如下一段代码
- function setButtonText():void {
- if (param.buttonText) {
- browseBtn.empty.buttonText.text = unescape(param.buttonText);
- }
- }
setButtonText方法是设置uploadify插件的ButtonText参数对应的实现代码,其中给文本框对象buttonText幅值了传入的参数buttonText,并且使用了unescape函数进行解码字符串。既然这里进行了解码,那么传入中文时是否需要编码后作为参数传入呢,经过尝试,在调用uploadify是对buttonText参数用escape函数进行编码,是可以正确将中文传入并显示到最终的上传按钮上的。下面是我调用uploadify的js代码
- //悟空的博客提供代码 www.7es.cn
- $('#bat_file_upload').uploadify({
- 'uploader': '/uploadify-v2.1.4/uploadify.swf',
- 'script': '/callback.aspx',
- 'cancelImg': '/uploadify-v2.1.4/cancel.png',
- 'folder': '/uploads',
- 'buttonText': escape('添加上传图片'),
- 'multi': true,
- 'auto': true,
- 'fileExt': '*.jpg;*.gif;*.png',
- 'fileDesc': 'Image Files (.JPG, .GIF, .PNG)',
- 'simUploadLimit': 2,
- 'removeCompleted': true,
- 'onAllComplete': function (e, data) {
- alert('上传完毕' + data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
- }
- });
需要注意的是,可能有的系统环境下,即使通过上述进行escape编码处理传入的参数,可能还会显示不出正确的中文按钮文字。那么可能需要对flash文件进行修改,具体是打开fla文件,找到元素buttonText,将他的字体属性从默认字体改成宋体或者微软雅黑等支持中文的字体,然后输出编译后的swf后缀flash文件,替换原有swf文件即可。
这里提供一下我修改过的uploadify文件包,需要的朋友可以直接下载使用