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 == 0)
    {
        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(0, 1) };
    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.效果演示：