无论是做个人产品还是商业产品，一个好的用户体验必然给用户留下比较深刻的影响，文件上传功能就是必不可少的一个用户体验。

比如现在一个使用场景：

一个电子商城，用户每次都要提交表单信息，每一次提交表单信息都会有一个10MB的附件，当用户点击提交按钮后，就是满满无期的等待时间。

所以一般WEB1.0的网站也很注意，把上传和普通表单提交分离了出来，但是这个并不能解决问题，然后我们又延伸出了AJAX提交表单的信息，当然这样应该也很好了。

但是对于一个大的文件而已，不管怎么提交方式，用户想要得到的是文件上传的进度。比如QQ邮箱都是支持上传附件显示进度提示的。

最近偶然一次机会看到一个JQUERY版本的上传插件uploadify,从官网下载了试用了下，配置很简单，用户界面也很友好，还支持多文件同时上传

官方资料：

官网主页：

http://www.uploadify.com/

相关配置参数：

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" οnclick="$('#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!');
    }