ASP.NET MVC 4 中Jquery上传插件Uploadify简单使用-版本:3.2.1

1.官网下载开发包：http://www.uploadify.com/download/，选择免费的Flash版本：

2.解压后，需要用到以下几个文件：

需要修改uploadify.css中取消上传按钮的背景图片路径：

.uploadify-queue-item .cancel a {
    background: url('../img/uploadify-cancel.png') 0 0 no-repeat;
    float: right;
    height:    16px;
    text-indent: -9999px;
    width: 16px;
}

3.页面添加样式表和脚本库的引用：

<link href="~/Content/uploadify/uploadify.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Content/uploadify/jquery.uploadify.min.js"></script> 

4.页面添加用于生成上传按钮的标签：

<span id="btn_upload"></span>

5.初始化，生成按钮：

 $(function () {
     $('#btn_upload').uploadify({
         uploader: '/article/upload',            // 服务器处理地址
         swf: '/Content/uploadify/uploadify.swf',
         buttonText: "选择文件",                  //按钮文字
         height: 34,                             //按钮高度
         width: 82,                              //按钮宽度
         fileTypeExts: "*.jpg;*.png;",           //允许的文件类型
         fileTypeDesc: "请选择图片文件",           //文件说明
         formData: { "imgType": "normal" }, //提交给服务器端的参数
         onUploadSuccess: function (file, data, response) {   //一个文件上传成功后的响应事件处理
             var data = $.parseJSON(data);
             alert(data.imgpath);
         }
     });
 });

6.后台代码：

 public ActionResult Upload(HttpPostedFileBase Filedata)
 {
     // 没有文件上传，直接返回
     if (Filedata == null || string.IsNullOrEmpty(Filedata.FileName) || Filedata.ContentLength == )
     {
         return HttpNotFound();
     }

     //获取文件完整文件名(包含绝对路径)
     //文件存放路径格式：/files/upload/{日期}/{md5}.{后缀名}
     //例如：/files/upload/20130913/43CA215D947F8C1F1DDFCED383C4D706.jpg
     string fileMD5 = CommonFuncs.GetStreamMD5(Filedata.InputStream);
     string FileEextension = Path.GetExtension(Filedata.FileName);
     string uploadDate = DateTime.Now.ToString("yyyyMMdd");

     string imgType = Request["imgType"];
     string virtualPath = "/";
     if (imgType == "normal")
     {
         virtualPath = string.Format("~/files/upload/{0}/{1}{2}", uploadDate, fileMD5, FileEextension);
     }
     else
     {
         virtualPath = string.Format("~/files/upload2/{0}/{1}{2}", uploadDate, fileMD5, FileEextension);
     }
     string fullFileName = this.Server.MapPath(virtualPath);

     //创建文件夹，保存文件
     string path = Path.GetDirectoryName(fullFileName);
     Directory.CreateDirectory(path);
     if (!System.IO.File.Exists(fullFileName))
     {
         Filedata.SaveAs(fullFileName);
     }

     var data = new { imgtype = imgType, imgpath = virtualPath.Remove(, ) };
     return Json(data, JsonRequestBehavior.AllowGet);
     }
 }

7.相关参数说明：

• uploader: '/article/upload'　　请求地址，对应于后台进行处理的Action；
• formData:{ "imgType":"normal" }　　参数可以动态设置，一般在onUploadStart事件中进行处理：

  onUploadStart:function(file){
      $("#btn_upload").uploadify("settings", "formData", { "imgType": "other","imgMode":"big") });
  }

  如果参数名与初始化的formData中一样，参数值将覆盖，否则添加。动态设置的方法在开始上传之前执行都是可以的，该试例在两个checkbox(通过bootstrap-switch美化)的状态切换时进行设置：

  $('#img_mode').on('switch-change', function (e, data) {
      $("#btn_upload").uploadify("settings", "formData", { "imgMode": (data.value ? "small" : "big") });
  });
  $('#img_type').on('switch-change', function (e, data) {
      $("#btn_upload").uploadify("settings", "formData", { "imgType": (data.value ? "normal" : "big") });
  });

• onUploadSuccess事件处理函数的3个参数：file、data、response
  • file - 包含原始文件的信息；
  • response - 后台返回true或false；
  • data - 后台返回的数据，试例中为Json对象；
• 其他详细参数，参考官方文档：http://www.uploadify.com/documentation/

8.效果演示：