首先申明下哈，俺新手一个，也是第一次写博。如有错误望指正但勿喷，谢谢!如果对您有用，请留下您的脚印！：）
- 下载Uploadify开发包,下载地址：http://www.uploadify.com/download/
2.下载下来解压uploadify出来后会得到几个文件，但是我们只需要几个开发的js包，一个取消的图片，一个swf文件，一个css样式文件，如下图：
3.得到这几个文件以后，新建一个mvc的项目，将这几个文件放到相应的目录下面，我们就可以开始开发了。
4.当项目都布置好以后，我们先来了解一下Uploadify的所有属性，只有清楚每一个属性是做什么的，才能知道怎么去配置属性，怎么使用其强大的功能：
| 名称 | 类型 | 默认值 | 例子 | 作用 |
|---|---|---|---|---|
| auto | Boolean | true | auto: true | 如果为true，就自动上传，当你select了文件以后不需要用户使用upload方法就自动上传 |
| buttonClass | string | - | buttonClass: "selectbtnClass" | 选择按钮的样式 |
| swf | string | uploadify.swf | swf: "/Content/Uploadify/swf/uploadify.swf" | swf文件的地址 |
| buttonCursor | string | hand | buttonCursor: "arrow" | 鼠标悬浮在选择按钮上的样式，只能有两个值hand arrow 手样式或者箭头 |
| buttonText | string | SELECT FILES | buttonText: "选择.." | 按钮显示的文字 |
| checkExisting | string | false | checkExisting: "@Url.Content("~/Home/Test")" | 一个后台地址，来验证正在上传的文件在默认文件夹中是否存在，如果存在返回1 如果0则不存在 |
| debug | Boolean | false | debug: true | 如果为true则页面会显示一个调试对话框 |
| fileObjName | string | Filedata | fileObjName: "file" | 用来设置后台接受这个file文件的参数名字，如果这里设置为fileData 那么后台 request.files["fileData"] |
| fileSizeLimit | string|number | SELECT FILES | fileSizeLimit: "50kB",fileSizeLimit: 50 | 限制上传文件的大小,默认单位是KB,可以是数字也可以是string类型,可以的单位(B,KB,MB,GB)如：500,'500B'都可以。不设置则没有任何限制 |
| fileTypeDesc | string | All Files | fileTypeDesc: "Excel文件" | 文件类型的描述 |
| fileTypeExts | string | *.* | fileTypeExts: "*.xls;*.xlsx;*.docx;*.*" | 设置选择文件类型，如果要设置多个要用封号隔开，如果不设置则为*.*任意类型 |
| queueID | string | false | queueID:"queuediv" | 可以任意选择一个div或者其他标签作为你的文件列表，这里填写标签的ID |
| formData | json | - | formData: { 'type': _type, 'age': _age } | 限制上传文件的大小,默认单位是KB,可以是数字也可以是string类型,可以的单位(B,KB,MB,GB)如：500,'500B'都可以。不设置则没有任何限制 |
| itemTemplate | string | false | 设置显示列表的html代码, 有几个字段 fileSize:文件的大小，fileName：文件名字,instanceID:uploadify这个控件的id，fileID：文件在queue上的id | |
| multi | Boolean | true | multi: true | 设置是否可以批量选择。这个地方只能控制是否可以一次选择多个文件，不是用来控制是否是单个上传还是批量上传的，因为用户还是可以一个一个的选择多个文件 |
| method | string | post | method: "get" | 上传类型 post或者get |
| overrideEvents | string | - | overrideEvents: ["onSelectError","onDialogClose"] | 忽略jq自身的事件，只响应用户重写的事件 |
| uploader | string | uploadify.php | uploader: "@Url.Content("~/Home/Upload")" | 必须的一个属性，请求的后台地址 |
| preventCaching | Boolean | false | preventCaching: true | 在url后面添加一个任意值一起传递到后台，防止缓存 |
| progressData | string | percentage | progressData: "speed" | 只能有两个值percentage or speed 上传的进度条上显示的是百分比或者多少kb/s |
| queueSizeLimit | number | 999 | queueSizeLimit: 10 | 设置上传文件列表数目如果设置为只允许单个上传只需要设置为1即可，如果超过则响应onSelectError方法 |
| removeComplete | Boolean | true | removeComplete: true | 将已经上传完的文件移除列表，Boolean值,默认值为true |
| removeTimeout | number | 3s | removeTimeout: 10 | 将一个完成的文件延迟多少秒从列表中移除 |
| requeueErrors | Boolean | false | requeueErrors: true | 如果设置为true，上传发生错误时，文件将重复上传多次以后才返回错误 |
| successTimeOut | number | 30 | successTimeOut: 5 | 文件上传成功以后等待服务器响应时间，如果超过这个时间服务器还没有响应那么将子自动显示其上传成功设置response为true. onUploadSuccess |
| uploadLimit | number | 999 | uploadLimit:10 | 这个貌似和queueSizeLimit重复了，测试显示只有同时满足这两个才能上传。然后超过以后触发的方法不同 这个是onUploadError |
| width | number | 120 | 100 | 设置按钮的宽度,只需要写一个数字就好了,不能"60px"这样写 |
| height | number | 30 | height: 60 | 设置按钮的高度 |
5.Uploadify封装的一些列事件的作用和参数介绍：
| 名称 | 参数 | 描述 |
|---|---|---|
| onCancel | file对象,包含name,size,type(.*)等属性 | 当有文件被取消的时候触发这个事件 |
| onClearQueue | queueItemCount(number)列表文件数量 | 使用Cancel方法清空列表的时候触发,当触发的时候这个事件比onCancel先执行，queueItemCount(number)列表文件数量 |
| onDestroy | - | /当destroy方法使用的时候触发，没有参数 |
| onDialogClose | queueData对象 | 当选择框关闭的时候触发事件，queueData包含fileSelected选择文件数量,fileReplaced被替换文件数量,fileCanceled被取消的数量,fileErrored出现错误文件数量,fileQueued添加到列表上的数量 |
| onDialogOpen | - | 当选择对话框被打开以后，当你点击打开文件的时候触发,没有参数，触发在close之前 |
| onDisable | - | 当用disable,true禁用控件方法使用的时候触发，没有参数 |
| onEnable | - | 当使用disable false启用控件的时候触发，没有参数 |
| onFallback | - | 在初始化控件的时候当浏览器的flash版本和控件的不兼容或者没有安装flash都会触发这个事件，没有参数 |
| onInit | instance对象 | 在控件第一次被加载的时候,在初始化的最后触发这个事件，instance是uploadify这个控件对象，可以得到这个控件的一切初始化后的信息，比如instance.settings.buttonText,instance.settings.buttonClass; |
| onQueueComplete | queueData对象 | 当列表中的所有文件都上传完成complete的时候触发，queueData包含属性uploadsSuccessful上传成功的数量,uploadsErrored上传出错的数量 |
| onSelect | file对象,包含name,size,type(.*)等属性 | 当文件被选择 而且添加到列表上以后才触发，如果选择而没有添加到列表上是不会触发的，比如选择以后提示已经存在列表上是否覆盖，然后点击了取消是不会触发的 |
| onSelectError | file, errorcode, errormsg | errorcode(数字): QUEUE_LIMIT_EXCEEDED:-100(文件数量超过列表限制),FILE_EXCEEDS_SIZE_LIMIT:-110(文件大小超过限制),ZERO_BYTE_FILE:-120(文件为空),INVALID_FILETYPE:-130(文件类型错误).如果不设置将jquery中的onSelectError事件给忽略掉，他会执行你的错误信息之后还会执行他默认的方法一次，弹出所有的错误。所以我们要设置overrideEvents: ["onSelectError","onDialogClose"],这个属性，那么就重写了这个事件，jquery就会默认不执行他自己的这个事件，而只执行你重写的这个事件。当然如果只重写这个事件，他最后还是会弹出一个英文提示，大致意思是这个文件不能被添加到列表中，而触发这个事件的是onDialogClose,因为dialogClose的时候 他也会验证一次文件是否有error，如果有就弹出来，所以这里要忽略掉onDialogClose,当然你自己如果重写了这个事件，他会执行玩selecterror以后再执行你重写的ondialogclose事件 |
| onSWFReady | - | 没有参数，当swf被加载好了，而且准备好了的时候就触发这个事件 |
| onUploadComplete | file对象,包含name,size,type(.*)等属性 | 为每一个上传完成的文件触发事件，与onQueueComplete不同，queueComplete是所有文件上传完以后 |
| onUploadError | file, errorCode, errorMsg, errorString(详情看onSelectError参数的介绍) | 当文件上传但是返回了一个错误的时候触发,errorString很详细的错误细节，当然如果你重写这个事件 也是需要忽略掉他自身的事件的，设置overrideEvents属性 |
| onUploadProgress | file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal | 在每个文件上传的过程中的每时每刻都触发,bytesUploaded当前正在上传的文件总共上传的字节，bytesTotal当前正在上传的文件的总字节,totalBytesUploaded总共上传的字节，包含已经上传完了的和现在正在上传的，totalbytestotal 列表中所有文件的字节数（包含已经上传完成） |
| onUploadStart | file对象,包含name,size,type(.*)等属性 | 文件上传之前触发 |
| onUploadSuccess | file, data, response | 为每个文件上传success以后触发，data为上传成功以后后台返回的数据，response为当后台服务器响应以后返回true。如果服务器没有响应，则返回false；如果返回的是false，当successtimeout这个属性设置的事件过后，控件自动显示其为true.这样得到的data当然为空 |
6.Uploadify封装的一些方法的介绍：
upload:将列表中的文件上传到服务器。
cancel：清除列表中的文件。
destroy：销毁这个控件。
Disable：禁用控件。
Enable：启用控件。
settings：修改控件配置的属性。
注意：$("#file_upload").uploadify("settings","buttonText","改变")唯一不能改变的属性就是swf地址
7.了解玩所有的属性，事件，方法以后就可以正式开始Uploadify的上传之旅了。
前端View代码：
@{ ViewBag.Title = "主页"; } <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")"></script> <script src="@Url.Content("~/Scripts/Uploadify/jquery.uploadify.js")"></script> <link href="@Url.Content("~/Content/Uploadify/uploadify.css")" rel="stylesheet" /> <style> #queueDiv
{
background-color:#aaa;
overflow-y:scroll;
color:white;
font-size:12px;
} .selectbtnClass { background-color:red; text-align:center; border-radius:25px; } </style> <script type="text/javascript"> $(function () { var _type = "男"; var _age = 20; $("#file_upload").uploadify({ auto: true, buttonClass: "selectbtnClass", swf: "/Content/Uploadify/swf/uploadify.swf", buttonCursor: "arrow", buttonText: "选择..", checkExisting: "@Url.Content("~/Home/Test")", debug: true, fileObjName: "fileData", fileSizeLimit: "50kB", fileTypeDesc: "Excel文件", fileTypeExts: "*.xls;*.xlsx;*.docx;*.*", formData: { 'type': _type, 'age': _age }, queueID:"queueDiv",
itemTemplate: '<div style="background-color:#aaa;color:red;350px;" id="${fileID}" class="uploadify-queue-item">\ <div class="cancel">\ <a href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">X</a>\ </div>\ <span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\ </div>', multi: true, method: "post", overrideEvents: ["onSelectError","onDialogClose"], uploader: "@Url.Content("~/Home/Upload")", preventCaching: true, progressData: "speed", queueSizeLimit: 10, removeComplete: true, removeTimeout: 10, requeueErrors: true, successTimeOut: 5, uploadLimit:10, 100, height: 60, onCancel: function (file) { alert(file.name); }, onClearQueue: function (queueItemCount) { alert("清除的文件数目" + queueItemCount+"(onClearQueue事件被触发)"); }, onDestroy: function () { alert("uploadify is Destroyed(onDestroy事件被触发)"); }, onDialogClose: function (queueData) { var file = queueData.files; alert("选择文件"+queueData.filesSelected+"|被取消的文件数"+queueData.filesReplaced+"(onDialogClose事件被触发)"); }, onDialogOpen: function () { alert("选择框被打开了;(onDialogOpen事件触发)"); }, onDisable: function () { alert("控件被禁用了;(onDisable事件触发)"); }, onEnable: function () { alert("控件可以使用了(onEnable事件被触发)"); }, onFallback: function () { alert("没有发现Flash(onFallback事件被触发)"); }, onInit: function (instance) { alert("buttonText:" + instance.settings.buttonText+"(onInit事件被触发)"); }, onQueueComplete: function (queueData) { alert(queueData.uploadsSuccessful); }, onSelect: function (file) { alert("文件" + file.name + "被选择了(onSelect事件触发)"); }, onSelectError: function (file, errorcode, errormsg) { if (errorcode == -100) { alert("文件" + file.name + "引发了错误,错误原因:文件数量超过列表限制(onSelectError事件触发)"); return; } else if (errorcode == -110) { alert("文件" + file.name + "引发了错误,错误原因:文件太大了(onSelectError事件触发)"); return; } else if (errorcode == -120) { alert("文件" + file.name + "引发了错误,错误原因:文件为空(onSelectError事件触发)"); return; } else if (errorcode == -130) { alert("文件" + file.name + "引发了错误,错误原因:文件类型错误(onSelectError事件触发)"); return; } }, onSWFReady: function () { alert("Flash已经初始化完毕(onSWFReady事件被触发)"); }, onUploadComplete: function (file) { alert("文件" + file.name + "上传完成!(onUploadComplete事件被触发)"); }, onUploadError: function (file, errorCode, errorMsg, errorString) { alert("文件"+file.name+"错误代码："+errorCode+"原因"+errorMsg+"详细"+errorString+"(onUploadError事件被触发)") }, onUploadProgress: function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { alert("文件" + file.name + "总共:" + totalBytesTotal + "总共上传:" + totalBytesUploaded + "(OnUploadProgress事件被触发)(希望不要被坑，一般将这个信息用html显示出来滴!这里简单的弹出来)"); }, onUploadStart: function (file) { alert("文件" + file.name+"(onUploadStart事件触发)"); }, onUploadSuccess: function (file, data, response) { alert("文件" + file.name + "返回数据" + data + "返回response" + response + "(onUploadSuccess事件被触发)"); } }); }) </script> <input type="file" id="file_upload" name="file_upload" /> <div id="queueDiv"></div>
<a href="#" onclick="javascript:$('#file_upload').uploadify('upload','*')">Upload</a>|| <a href="#" onclick="javascript:$('#file_upload').uploadify('cancel','*')">Clear Queue</a> || <a href="#" onclick="javascript:$('#file_upload').uploadify('destroy')">Destroy</a> || <a href="#" onclick="javascript:$('#file_upload').uploadify('disable',true)">Disable</a>|| <a href="#" onclick="javascript:$('#file_upload').uploadify('disable',false)">Enable</a>|| <a href="#" onclick="javascript:$('#file_upload').uploadify('stop')">Stop</a>|| <a href="#" onclick='$("#file_upload").uploadify("settings","buttonText","改变")'>改变</a> <div style="color:red">$("#file_upload").uploadify("settings","buttonText","改变")唯一不能改变的属性就是swf地址<br /></div>
后台代码比较简单，Controller代码如下：
1 public void Upload() 2 { 3 HttpPostedFileBase file = Request.Files["fileData"]; 4 string path = Server.MapPath("~/Upload/"); 5 file.SaveAs(path+file.FileName); 6 7 }