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


    首先介绍下实现上传功能

        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

  • 相关阅读:
    创建一个windows服务的小程序及注意事项
    Asp中上传文件
    C#创建Excel表格(样式设置)
    在Windows服务中使用EventLog组件纪录日志
    MVC中使用 事物
    WCF(学习笔记)【参见WCF教程】
    用vs命令提示符来使用 Installutil.exe来安装和卸载Windows服务
    web service使用注意事项
    iphone开发 有关 Navigation Bar 和 UITableView 的用法(Navigation Bar 的edit 按钮 自定义实现编辑状态)
    在Mvc中 使用 Ajax 提交和接收 数据
  • 原文地址:https://www.cnblogs.com/ctriphire/p/2936981.html
Copyright © 2020-2023  润新知