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

比如现在一个使用场景：

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

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

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

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

默认下载是PHP版本的，部署到项目我做的步骤：

1.把上传处理修改为自己项目的上传处理（默认对文件格式没有任何安全过滤，所以这个要注意一下）

 

配置使用：

楼主使用的是最新版本v2.1.4，参数和老版本有些不同，比如sizeLimit现在就是queuesizeLimit，在看到的一些配置不是最新的，楼主复制就拿来用，调试半天不行，悲剧啊 %>_<%

v2.1.4版本在Header部分加入:

  <link href="/Public/javascript/uploadify/uploadify.css" type="text/css" rel="stylesheet" /&gt;  &lt;script type="text/javascript" src="/Public/javascript/jquery.js"&gt;&lt;/script&gt;  &lt;script type="text/javascript" src="/Public/javascript/uploadify/swfobject.js"&gt;&lt;/script&gt;  &lt;script type="text/javascript" src="/Public/javascript/uploadify/jquery.uploadify.v2.1.4.min.js"&gt;&lt;/script&gt;  &lt;script type="text/javascript"&gt;  $(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!');   }    });  });  &lt;/script&gt;

Body加入:

  <input id="file_upload" name="file_upload" type="file" /&gt;  &lt;input type="button" name="upload" id="upload" value="uplaod files" onclick="$('#file_upload').uploadifyUpload();"/&gt;

支持中文：

在使用的时候发现一个错误提示是英文的，还有图片默认是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!'); }