uploadify 学习与实践 一网打尽

 

 

Uploadify简单说来，是基于Jquery的一款文件上传插件。它的功能特色总结如下：
支持单文件或多文件上传，可控制并发上传的文件数
在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java……
通过参数可配置上传文件类型及大小限制
通过参数可配置是否选择文件后自动上传
易于扩展，可控制每一步骤的回调函数（onSelect, onCancel……）
通过接口参数和CSS控制外观
更多……

 

Uploadify在线演示：在线Demo http://www.uploadify.com/demo

Uploadify配置参数及接口文档：http://www.uploadify.com/documentation

Uploadify插件下载地址：http://www.uploadify.com/download

 

下载完成后，解压缩

jquery.uploadify.js（完成上传功能的脚本文件，在调用页面引用）、
uploadify.css（外观样式表）

uploader.swf（上传控件的主体文件，flash控件）

upload.php（服务器端处理文件，官方仅提供了php版的）

新版增加swfobject.js

 

//声明一个普通的html文件上传控件，并指定id <input type="file" name="fileInput" id="fileInput" /> //将声明的普通上传控件与Uploadify插件绑定 <mce:script type="text/javascript"><!-- $(document).ready(function() { $('#fileInput').fileUpload ({ //以下参数均是可选 'uploader' : 'uploader.swf', //指定上传控件的主体文件，默认‘uploader.swf’ 'script' : 'upload.php', //指定服务器端上传处理文件，默认‘upload.php’ 'cancelImg' : 'cancel.png', //指定取消上传的图片，默认‘cancel.png’ 'auto' : true, //选定文件后是否自动上传，默认false 'folder' : '/uploads' //要上传到的服务器路径，默认‘/’ 'multi' : true, //是否允许同时上传多文件，默认false 'fileDesc' : 'rar文件或zip文件' //出现在上传对话框中的文件类型描述 'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc 'sizeLimit': 86400 //控制上传文件的大小，单位byte 'simUploadLimit' :5 //多文件上传时，同时上传文件数目限制 }); }); // --></mce:script>

 

 参数不完善。。。可以参看Uploadify配置参数及接口文档

script ： 后台处理程序的相对路径 。默认值：uploadify.php 　　

checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 　　

fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata 　　

method ： 提交方式Post 或Get 默认为Post 　　

scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain 　　

folder ： 上传文件存放的目录 。 　　

queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。 　　

queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。 　　

multi ： 设置为true时可以上传多个文件。 　　

auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。 　

fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”，打开文件选择框效果如下图： 　　

fileExt ： 设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。 　　

sizeLimit ： 上传文件的大小限制 。 　　

simUploadLimit ： 允许同时上传的个数 默认值：1 。这个不建议不多设置 　　

buttonText ： 浏览按钮的文本，默认值：BROWSE 。 　　

buttonImg ： 浏览按钮的图片的路径 。 　　

hideButton ： 设置为true则隐藏浏览按钮的图片 。 　　

rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。 　　

width ： 设置浏览按钮的宽度 ，默认值：110。 　　

height ： 设置浏览按钮的高度 ，默认值：30。 　　

wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。 cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标

 

通过调用相关功能函数，声明功能按钮。

例如声明上传功能按钮（自动上传时不需要）：
<a href="javascript:$('#fileInput').fileUploadStart();">上传文件</a>

声明取消多文件上传时上传队列：
<a href="javascript:$('#fileInput').fileUploadClearQueue();">取消上传队列</a>

 

jQuery.Uploadify 上传中文文件名出现乱码解决，无非是程序编码和系统编码不一致造成的，于是尝试修改uploadify.php文件，

将：move_uploaded_file($tempFile,$targetFile);
修改为：move_uploaded_file($tempFile,iconv(“UTF-8″,”gb2312″, $targetFile));

 

无论你怎么设置参数buttonText ，它的中文按钮都会出现乱码的情况,很明显是在对字符编码和解码的时候出现问题了，打开该插件的脚本，发现源码是这样对按钮文字buttonText 进行编码的：
if (settings.buttonText) data.buttonText = escape(settings.buttonText);对编码方式了解的朋友，应该知道js中的escape()方法是采用ISO Latin字符集对指定的字符串进行编码的，很明显咱们的中文，包括日文，韩文(CJK)都不包括在ISO Latin字符集里面的。而且，该插件的解码方式应该用了unescpe()。与escape()是不对称的。
解决：1.改变字符编码解码方式。encodeURI() 方法，可以把URI字符串采用UTF-8编码格式转化成escape格式的字符串，而且咱们的中文也属于UTF-8字符集里面的，再用decodeURI()进行解码。具体修改代码如下：

1. jquery.uploadify.v2.0.3.js 66行 < if (settings.buttonText) data.buttonText = escape(settings.buttonText); > if (settings.buttonText) data.buttonText = encodeURI(settings.buttonText); 2. uploadify.fla scene 1 脚本文件117行 < browseBtn.empty.buttonText.text = unescape(param.buttonText); > browseBtn.empty.buttonText.text = decodeURI(param.buttonText); 3. uploadify.fla Scene 1/ empty/ buttonText 的UI属性 必须使用设备字体（比如 _sans）而不是嵌入字体。

 

2.使用参数buttonImg

显然buttonImg是有来设置图片按钮的，自己做的图片，不存在乱码现象，可能有点慢

最后将修改过fla的生成swf的文件，覆盖即可。

 

此处为未验证

uploadify提供了两种官方的方法来设置上传文件的携带参数：
1.初始化时： 
$('dom').uploadify({
.....
scriptData: { param: value }
.....
});
2.上传文件之前：
$('dom').uploadifySettings('scriptData', {
'param' : value
})

有点小意外的是：初始化时设置的scriptData是固定值，即使是你用表达式，也不过是初始化时求解赋值。
明显的第二种方式就灵活多了。
不过我两种方式我都遇到了乱码问题，奇怪的是解决乱码的方式却不一样。
1. encodeURIComponent( encodeURI("中文") )
2. encodeURI( "中文")