MVC3+jquery Uploadify 上传文件

最近做项目用到了上传图片的功能，以前也写过这类代码，不过都是用传统的file标签，今天整理一个好用的插件Uploadify。。都做了一些注释，一看便知。

可以去官网下载最新的：Uploadify下载地址：http://www.uploadify.com/download/

1.引用文件

    <link href="@Url.Content("~/Scripts/uploadify/uploadify.CSS")" rel="stylesheet" type="text/css" />    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>    <script src="@Url.Content("~/Scripts/uploadify/jquery.uploadify.min.js")" type="text/Javascript"></script>   

2.页面文件

 1 @{ 2     ViewBag.Title = "Index"; 3     Layout = "~/Views/Shared/_Layout.cshtml"; 4 } 5 @section Header{ 6     <link href="@Url.Content("~/Scripts/uploadify/uploadify.css")" rel="stylesheet" type="text/css" /> 7     <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> 8     <script src="@Url.Content("~/Scripts/uploadify/jquery.uploadify.min.js")" type="text/javascript"></script>    9 }10 <style type="text/css">11     body12     {13         font-size: 12px;14     }15     .tip16     {17         height: 20px;18         border-bottom: 1px solid #CCC;19         margin-bottom: 10px;       20     }21 </style>22 <div class="tip">23     jQuey Uploadify上传文件示例：24 </div>25 <div>26     <span id="uploadify"></span>27 </div>28 <div>29      <button onclick="javascript:$('#uploadify').uploadify('upload','*');">上传队列</button>30      <button onclick="javascript:$('#uploadify').uploadify('cancel', '*');">取消队列</button>31 </div>32 33 @*<div id="uploadfileQueue" style="margin-top:100px;">34     35 </div>*@36 <script type="text/javascript">37      $(function () {38          $('#uploadify').uploadify({39              debug: false,             //开启调试40              successTimeout: 99999,            //超时时间41              formData: {                        //附带值42                  'userid': '用户id',43                  'username': '用户名',44                  'rnd': '加密密文'45              },46              //queueID: 'uploadfileQueue',   //文件选择后的容器ID47              uploader: '/Home/Upload',           // 服务器端处理地址48              swf: '@Url.Content("~/Scripts/uploadify/uploadify.swf")',    // 上传使用的 Flash49              width: 110,                          // 按钮的宽度50              height: 23,                         // 按钮的高度51              buttonText: "请选择上传的文件",                 // 按钮上的文字52              buttonCursor: 'hand',              // 按钮的鼠标图标53              fileObjName: 'Filedata',            // 上传参数名称54              // 两个配套使用55              fileTypeExts: "*.jpg;*.png",             // 扩展名56              fileTypeDesc: "请选择 jpg png 文件",     // 文件说明57              auto: false,                // 选择之后，自动开始上传58              multi: true,               // 是否支持同时上传多个文件59              queueSizeLimit: 5,          //设置上传队列中同时允许的上传文件数量 允许多文件上传的时候，同时上传文件的个数60                                         //uploadLimit：设置允许上传的文件数量，默认为999。61                                         62              removeCompleted: false,   //设置已完成上传的文件是否从队列中移除，默认为true63              onQueueComplete: function (queueData) {//队列中全部文件上传完成时触发事件。64                  alert(queueData.uploadsSuccessful + '个文件上传完成');65              },66              //返回一个错误，选择文件的时候触发67         onSelectError:function(file, errorCode, errorMsg){68             switch(errorCode) {69                 case -100:70                     alert("上传的文件数量已经超出系统限制的" + $('#uploadify').uploadify('settings', 'queueSizeLimit') + "个文件！");71                     break;72                 case -110:73                     alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#uploadify').uploadify('settings', 'fileSizeLimit') + "大小！");74                     break;75                 case -120:76                     alert("文件 ["+file.name+"] 大小异常！");77                     break;78                 case -130:79                     alert("文件 ["+file.name+"] 类型不正确！");80                     break;81             }82         },       83         onFallback:function(){84             alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。"); //检测FLASH失败调用85         },86         onUploadSuccess: function (file, data, response) { //上传到服务器，服务器返回相应信息到data里87             alert(data);88         }89 90          });91      });92 </script>

3.控制器方法

 1   public ActionResult Upload(HttpPostedFileBase fileData, string formData) 2         {           3             if (fileData != null) 4             { 5                 try 6                 { 7                     // 文件上传后的保存路径 8                     string filePath = Server.MapPath("~/Uploads/"); 9                     if (!Directory.Exists(filePath))10                     {11                         Directory.CreateDirectory(filePath);12                     }13                     string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称14                     string fileExtension = Path.GetExtension(fileName); // 文件扩展名15                     string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称16                     fileData.SaveAs(filePath + saveName);17                     return Json(new { Success = true, FileName = fileName, SaveName = saveName });18                 }19                 catch (Exception ex)20                 {21                     return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);22                 }23             }24             else25             {26 27                 return Json(new { Success = false, Message = "请选择要上传的文件！" }, JsonRequestBehavior.AllowGet);28             }29         }

最后：效果图

源码下载地址：http://files.cnblogs.com/itxiaoyan2013/UploadFile.zip