JQuery批量图片上传插件—Uploadify

留个记号吧，估计要用到了。

JQuery批量图片上传插件—Uploadify使用记录

    应公司编辑部要求，需要图片批量上传功能来提高工作效率。在网上收集了些资料后，觉得JQuery Uploadify插件不错。下面简要介绍下Uploadify在ASP.NET中的实现以及遇到的一些问题

    说明：近期太忙，没时间管理空间，又有很多朋友需要源码学习，特将源码保存至Google Code，有需要的朋友请自行下载。

    首先介绍下实现上传功能

    1. 下载Uploadify插件：官方下载(本人以2.1.4版本开发）

    2. 创建一个Web项目，将下载的压缩包中必要的文件拷入项目中(如图所示)

      

    3. 创建一个一般处理程序UploadHander.ashx(HttpHander)用于处理上传的文件

    4. 创建UploadFile文件夹用来保存上传的图片

    5. 修改Default.aspx的HTML代码   

    6. 修改UploadHander.ashx处理上传的图片

    7. 运行效果

   

    上传功能至此已实现，具体参数说明请参考官方文档或博客园oec2003(水杯)的博客，下面介绍下本人在实现过程中遇到的问题

   

    1.buttonText 属性设置中文无效的问题

    原因：uploadify.js 中对使用escape()进行编码，在uploadify.swf中使用unescape()进行解码，js中的escape()方法是采用ISO Latin字符集对指定的字符串进行编码的，很明显咱们的中文，包括日文，韩文(CJK)都不包括在ISO Latin字符集里面的。

    解决方法：

    A. 修改插件

    修改uploadify.js

    将 if (settings.buttonText) data.buttonText = escape(settings.buttonText);

    改为 if (settings.buttonText) data.buttonText = encodeURI(settings.buttonText);

    修改uploadify.fla

    将 browseBtn.empty.buttonText.text = unescape(param.buttonText); 

    改为 browseBtn.empty.buttonText.text = decodeURI(param.buttonText); 

    然后重新生成uploadify.swf并拷入项目中

    B. 使用 buttonImg 参数

    显然buttonImg是用来设置图片按钮的，自己做的图片，没编码当然不会乱码了，不过这个方法，按钮显示会有点慢，还是比较推荐方法A.

 

    2. FireFox中 上传图标看不见

    原因：没有安装Flash非IE内核的插件

    解决方法：在FireFox中安装最新版本的非IE内核的插件

   

    3. onQueueFull 函数提示两次

    原因：在uploadify.js中 157行已经弹出提示，所以在页面中设置onQueueFull后会弹出两次提示

    解决方法：将uploadify.js中 alert('The queue is full.  The max size is ' + queueSizeLimit + '.');删除或将提示改为中文;

 

    4. uploadify.js中的中文乱码(不修改uploadify.js不会出现这种情况)

    原因：编码不统一，uploadify.js 采用UTF-8编码，ASP.NET环境默认为GB2312编码

    解决方法：引用 uploadify.js 时添加 charset="gb2312"

 

    5. 上传中文名称的文件时,Http Error

    原因：在uploadify.swf中采用utf-8编码并上传图片，ASP.NET默认GB2312编码

    解决方法：

    A. 在HttpHander处理上传图片时，添加 context.Response.ContentEncoding = System.Text.Encoding.UTF8;

    B. 在 Web.config 中添加如下代码

    <globalization fileEncoding="UTF-8" requestEncoding="UTF-8" responseEncoding="UTF-8"/> 

 

    6. 关于上传成功后图片自动消失的问题

    原因：在uploadify.js中第48行,有个属性：removeCompleted 该属性默认值为 true;表示自动移除上传成功的文件

    解决方法：修改 removeCompleted 默认值为 false

 

    参考资料：

    http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html

    http://www.bq69.com/browse-scripting/jquery-uploadify-messy-code-button.html

    源码下载：

    http://code.google.com/p/jquery-uploadify-demo/downloads/list