MVC3+jquery Uploadify 上傳文件

時間 2019-11-12

標籤 mvc3+jquery mvc jquery uploadify 上傳文件欄目 JQuery 简体版

原文原文鏈接

最近作項目用到了上傳圖片的功能，之前也寫過這類代碼，不過都是用傳統的file標籤，今天整理一個好用的插件Uploadify。。都作了一些註釋，一看便知。javascript

能夠去官網下載最新的：Uploadify下載地址：http://www.uploadify.com/download/css

1.引用文件 html

    <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.頁面文件java

 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     body
12     {
13         font-size: 12px;
14     }
15     .tip
16     {
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',   //文件選擇後的容器ID
47              uploader: '/Home/Upload',           // 服務器端處理地址
48              swf: '@Url.Content("~/Scripts/uploadify/uploadify.swf")',    // 上傳使用的 Flash
49              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,   //設置已完成上傳的文件是否從隊列中移除，默認爲true
63              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.控制器方法jquery

 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             else
25             {
26 
27                 return Json(new { Success = false, Message = "請選擇要上傳的文件！" }, JsonRequestBehavior.AllowGet);
28             }
29         }