基于JQUERY使用FLASH的AJAX上传进度条插件uploadify
无论是做个人产品还是商业产品，一个好的用户体验必然给用户留下比较深刻的影响，文件上传功能就是必不可少的一个用户体验。
比如现在一个使用场景：
一个电子商城，用户每次都要提交表单信息，每一次提交表单信息都会有一个10MB的附件，当用户点击提交按钮后，就是满满无期的等待时间。
所以一般WEB1.0的网站也很注意，把上传和普通表单提交分离了出来，但是这个并不能解决问题，然后我们又延伸出了AJAX提交表单的信息，当然这样应该也很好了。
但是对于一个大的文件而已，不管怎么提交方式，用户想要得到的是文件上传的进度。比如QQ邮箱都是支持上传附件显示进度提示的。
最近偶然一次机会看到一个JQUERY版本的上传插件uploadify,从官网下载了试用了下，配置很简单，用户界面也很友好，还支持多文件同时上传
官方资料：
官网主页：
相关配置参数：
http://www.uploadify.com/documentation/
默认下载是PHP版本的，部署到项目我做的步骤：
1.把上传处理修改为自己项目的上传处理（默认对文件格式没有任何安全过滤，所以这个要注意一下）
配置使用：
楼主使用的是最新版本v2.1.4，参数和老版本有些不同，比如sizeLimit现在就是queuesizeLimit，在看到的一些配置不是最新的，楼主复制就拿来用，调试半天不行，悲剧啊 %>_<%
v2.1.4版本在Header部分加入:
<link href="/Public/javascript/uploadify/uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/Public/javascript/jquery.js"></script>
<script type="text/javascript" src="/Public/javascript/uploadify/swfobject.js"></script>
<script type="text/javascript" src="/Public/javascript/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : '/Public/javascript/uploadify/uploadify.swf', // 默认上传主体文件
'script' : '/Public/javascript/uploadify/uploadify.php', // 默认处理上传文件
'cancelImg' : '/Public/javascript/uploadify/cancel.png', // 取消上传图片
'folder' : '/Data/', // 上传到服务器的保存目录,默认/
'multi' : true, // 多文件上传
'simUplaodLimit' : 5, // 多文件上传时候支持的最大文件数量型
'queuesizeLimit' : 3, // 上传文件大小控制
'auto' : false, // 选定文件是否自动上传
'onCancel' : function(event,ID,fileObj,data){
alert('The upload of ' + fileObj.name + ' has been canceled!');
}
});
});
</script>
Body加入:
<input id="file_upload" name="file_upload" type="file" />
<input type="button" name="upload" id="upload" value="uplaod files" onclick="$('#file_upload').uploadifyUpload();"/>
支持中文：
在使用的时候发现一个错误提示是英文的，还有图片默认是select imges,但是当你修改为"上传文件'的时候，出来的是乱码，原来是SWF默认转换了编码
解决方法：使用buttonImg属性，用图片代替按钮文字，然后使用 wmode=transparent把图片属性修改为透明即可。
上传完毕返回文件路径：
/*
ID
The unique ID of the file queue item.
fileObj
An object containing the file information.
[name] - The name of the uploaded file
[filePath] - The path on the server to the uploaded file
[size] – The size in bytes of the file
[creationDate] – The date the file was created
[modificationDate] – The last date the file was modified
[type] – The file extension beginning with a ‘.’
response
The text response sent back from the back-end upload script.
data
An object containing general data about the upload and the queue.
[fileCount] - The number of files remaining in the queue
[speed] - The average speed pf the file upload in KB/s
*/
$('#file_upload').uploadify({
'uploader' : '/uploadify/uploadify.swf',
'script' : '/uploadify/uploadify.php',
'cancelImg' : '/uploadify/cancel.png',
'folder' : '/uploads',
'multi' : true,
'onComplete' : function(event, ID, fileObj, response, data) {
alert('There are ' + data.fileCount + ' files remaining in the queue.');
}
});
注意：
当设置multi:true的时候，设置simUploadLimit不应过多，因为无论你设置同时上传几个文件，它都会一个一个去请求并上传，只是表面上感觉好像有多个线程同时在处理上传请求一样，只是表象而已。而且如果你把simUploadLimit设置过大就会经常出错，我设置成5的时候经常会有一两个文件上传失败。
配置参数一览：
uploadify提供了常用配置参数、触发事件和方法调用
Options:
auto: 自动上传
buttonImg: 按钮图片，使用该属性可以解决按钮不支持中文功能
buttonText: 按钮文字
cancellmg: 取消图片
cancellmg: 取消图片
checkScript:判断上传选择的文件在服务器是否存在的后台处理程序的相对路径,无需修改
displayData:可是设置为上传速度或者上传百分比
expressInstall:没有安装FLASH调用的安装程序，不用修改
fileDataName: 文件域的名称
fileDesc: 点击浏览的时候弹出框筛选的文件格式提示
fileExt:点击浏览的时候弹出框筛选的文件格式如：(*.jpg,*.gif)
folder: 上传保存文件，一般不用，我们会用自己的上传程序处理
height: - 文件域高度
hideButton: 隐藏按钮，通过CSS可设置另一个按钮
method: 上传方式(GET/POST)
multi:是否支持多文件上传
queueID:唯一的ID号，多文件上传不是线程上传，会发送N个单独的POST请求
queueSizeLimit: 同一个队列的最大上传数量
removeCompleted: 上传成功后是否隐藏上传队列
rollover: 设置按钮HOVER效果
script: 上传服务端处理页面，一般是自己项目的处理页面
scriptAccess:FLASH的文件的访问权限，本机测试可以修改为Always
scirptData: 提交表单的附带参数
simUploadLimit: 上传文件的最大数量
sizeLimit:上传文件大小控制
uploader: 上传按钮路径
width: 文件域宽度
wmode: 使用该属性可以使自己添加的图片实现透明(wmode:transparent)
Events:
onAllComplete:所有上传完成后调用
onCancel: 取消时候调用
onCheck: 检测的时候调用
onClearQueue:清除上传队列时候调用
onComplete:单个完成调用
onError:出现错误调用
onOpen:当上传开始时
onProgress: 每当上传发生变化时
onInit:第一次加载时候
onQueueFull:队列达到最大设置值时
onSelect:添加一个新队列时
onSelectOnce:一个文件或者一组文件添加到队列时
onSWFReady:当SWF文件加载完毕
Methods:
.uploadify() - 创建一个上传，所以就支持页面多个调用啦
.uploadifyCancel() - 取消上传
.uploadClearQueue() - 清除已经选择的附件
.uplaodSettings() - 设置配置参数，一般在初始化的时候就已经设置好了，不常用
.uplaodUpload() - 调用上传,当auto =true的时候是会自动上传的
在TP项目环境下配置上传测试成功部分代码：
'uploader' : '/Public/javascript/uploadify/uploadify.swf', // 默认上传主体文件
'script' : '/Public/javascript/uploadify/uploadify.php', // 默认处理上传文件
'cancelImg' : '/Public/javascript/uploadify/cancel.png', // 取消上传图片
'folder' : '/Data/', // 上传到服务器的保存目录,默认/
'multi' : true, // 多文件上传
'simUplaodLimit' : 5, // 多文件上传时候支持的最大文件数量型
'queuesizeLimit' : 3, // 上传文件大小控制
'auto' : false, // 选定文件是否自动上传
'onCancel' : function(event,ID,fileObj,data){
alert('The upload of ' + fileObj.name + ' has been canceled!');
}
