.NET MVC實現多圖片上傳並附帶參數（ajaxfileupload）

    作網站呢，都免不了要作圖片上傳。

    還記得去年作微信的時候用WebAPI+ajaxfileupload.js作了一個可以附帶參數上傳的功能，博文地址：.NET WebAPI 實現圖片上傳（包括附帶參數上傳圖片）

    這段時間在作一個網站，用的MVC5.0，有一個上傳多張圖片的需求...剛開始用的flash插件，這不前兩天Google發文說chrome瀏覽器即將把HTML5做爲默認設置了，flash只是對固定的幾個大網站作默認了...啊哦，leader這不就順帶給咱找了點事作「把flash插件幹掉，弄一個HTML5的」...

    呵呵~~

    也不知道leader到底知不知道啥叫HTML5，誰叫人是leader呢。

    那咱就作唄？！！！

 

    通過一天的奮戰，最終效果以下：

 

    好吧，樣式是本身寫的，low了點...將就着看。

    廢話很少說，直接上代碼：

1.先來看看MVC的action。博主的網站有文件服務器，走的內網共享，要是直接存本地相信你們都會...

這裏博主只是簡單限制了單個文件大小，我們能夠在config裏面限制一下整個大小，或者限制一下單次提交圖片個數什麼的....

 1         /// <summary>
 2         /// 圖片上傳  [FromBody]string type
 3         /// 單個圖片最大支持200KB
 4         /// </summary>
 5         /// <returns></returns>
 6         [HttpPost]
 7         public JsonResult ImgUpload()
 8         {
 9             var result = new List<ImgUploadResult>();
10 
11             // 定義容許上傳的文件擴展名 
12             const string fileTypes = "gif,jpg,jpeg,png,bmp";
13             // 最大文件大小(200KB)
14             const int maxSize = 205000;
15             // 獲取附帶POST參數值
16             var type = Request["type"];
17 
18             // 設置上傳目錄 
19             var imgPath = "";
20             switch (type)
21             {
22                 case "file":
23                     imgPath = ConfigurationManager.AppSettings["HouseImgPath"];
24                     break;
25                 case "video":
26                     imgPath = ConfigurationManager.AppSettings["HouseVideoPath"];
27                     break;
28                 case "information":
29                     imgPath = ConfigurationManager.AppSettings["InformationPath"];
30                     break;
31             }
32             // 存儲文件服務器IP(內網)
33             string fileComputerIP = ConfigurationManager.AppSettings["FileComputerIP"];
34 
35 
36             for (var fileId = 0; fileId < Request.Files.Count; fileId++)
37             {
38                 var curFile = Request.Files[fileId];
39                 if (curFile.ContentLength < 1) {continue;}
40                 else if (curFile.ContentLength > maxSize)
41                 {
42                     return this.JsonFormatError("上傳文件中有圖片大小超出200KB!");
43                 }
44                 var fileExt = Path.GetExtension(curFile.FileName);
45                 if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)
46                 {
47                     return this.JsonFormatError("上傳文件中包含不支持文件格式!");
48                 }
49                 else
50                 {
51                     // 存儲文件名
52                     string fullFileName = type + "_" + DateTime.Now.ToString("yyyyMMddhhmmssff") + CreateRandomCode(8) + fileExt;
53 
54                     // 存儲路徑（絕對路徑）
55                     string virtualPath = string.Format(@"\\{0}\{1}\{2}", fileComputerIP, imgPath, fullFileName);
56 
57                     try
58                     {
59                         curFile.SaveAs(virtualPath);
60                         // 文件服務器端口號IP
61                         string fileComputerIPPort = ConfigurationManager.AppSettings["FileComputerIPNumber"];
62                         result.Add(new ImgUploadResult()
63                         {
64                             FullFileName = fullFileName,
65                             ImgUrl = string.Format(@"http://{0}/{1}/{2}", (fileComputerIP + ":" + fileComputerIPPort), imgPath, fullFileName)
66                         });
67                     }
68                     catch (Exception exception)
69                     {
70                         throw new Exception("上傳失敗!", exception);
71                     }
72                 }
73             }
74             return this.JsonFormatSuccess(result);
75         }
76 
77         /// <summary>
78         /// 生成指定長度的隨機碼。
79         /// </summary>
80         private string CreateRandomCode(int length)
81         {
82             string[] codes = new string[36] { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z" };
83             StringBuilder randomCode = new StringBuilder();
84             Random rand = new Random();
85             for (int i = 0; i < length; i++)
86             {
87                 randomCode.Append(codes[rand.Next(codes.Length)]);
88             }
89             return randomCode.ToString();
90         }

 

2.再來看看前端代碼，ajaxfileupload.js依然是用的我之前改過的一個版本，下載地址：支持附帶參數提交的ajaxfileupload.js文件

 

3.本身寫的一個imgupload的js包，沒有作成jQuery擴展，簡單的作了一個包，暴露了幾個接口，方便調用。有興趣的能夠作成jQuery擴展

  1 /// -------------------------
  2 /// 圖片文件上傳
  3 /// -------------------------
  4 
  5 var imgFileUpload = (function () {
  6 
  7     var $This = [];
  8     var ImgType = "";
  9     var URL = "";
 10 
 11     // 構造方法
 12     function imgFileUpload($this, imgType, url) {
 13         $This = $this;
 14         ImgType = imgType;
 15         URL = url;
 16 
 17         _bindUploadEvent();
 18     };
 19 
 20     // 註冊上傳控件事件
 21     function _bindUploadEvent() {
 22 
 23         $.each($This, function (i, item) {
 24             $(item).find("i.button").click(function () {
 25                 $(item).find("input").click();
 26             });
 27         });
 28     }
 29 
 30     // 上傳文件控件change
 31     var fileUploadChange = function (fileControl) {
 32 
 33         var file = fileControl.files[0];
 34 
 35         var reader = new FileReader();
 36         reader.onload = function (evt) {
 37             var $par = $(fileControl).parent();
 38             // 執行上傳
 39             _uploadImage($par);
 40         }
 41         reader.readAsDataURL(file);
 42     }
 43 
 44     // 上傳文件
 45     function _uploadImage($box) {
 46         var files = $box.find("[type=file]");
 47 
 48         $(files).each(function (index, item) {
 49             if (item.files.length) {
 50                 $.ajaxFileUpload({
 51                     url: URL,
 52                     secureuri: false,
 53                     fileUpload: item,
 54                     dataType: 'json',
 55                     data: { "type": ImgType },
 56                     success: function (data, status) {
 57 
 58                         var str = $(data).text();
 59                         var result = JSON.parse(str);
 60                         if (result.Code == 0) {
 61                             var html = "";
 62                             $.each(result.Data, function (i, dat) {
 63                                 html += "<i class=\"list\"><img src=\"" + dat.ImgUrl + "\" sname=\"" + dat.FullFileName + "\" /><i onclick=\"imgFileUpload.deletedImg(this)\">刪除</i></i>";
 64                             });
 65                             $box.find("div.imgShow").append(html);
 66                         } else {
 67                             alert(result.Message);
 68                         }
 69                     },
 70                     error: function (data, status, e) {
 71                         alert("上傳失敗！");
 72                     }
 73                 });
 74             }
 75         });
 76     }
 77 
 78     // 圖片刪除事件
 79     function imgDeleted($i) {
 80         $($i).parent().remove();
 81     }
 82 
 83     // 獲取已上傳圖片名稱組合串
 84     function getImgNameStr() {
 85         debugger
 86         var result = "";
 87 
 88         var $img = $("div.houseImgUpload i.list img");
 89         $.each($img, function (i, item) {
 90             if (i == $img.length - 1) {
 91                 result += $(item).attr("sname");
 92             } else {
 93                 result += $(item).attr("sname") + ",";
 94             }
 95         });
 96 
 97         return result;
 98     }
 99 
100 
101     return {
102         init: function ($this, imgType, url) {
103             imgFileUpload($this, imgType, url);
104         },
105         fileUploadChange: function ($controller) {
106             fileUploadChange($controller);
107         },
108         deletedImg: function ($i) {
109             imgDeleted($i);
110         },
111         getImgNameStr: function () {
112             return getImgNameStr();
113         }
114     };
115 
116 })();

具體代碼，應該都能看懂了... init是初始化方法，頁面加載完成時調用一下：

1 $(document).ready(function () {
2         imgFileUpload.init([$(".houseImgUpload")], "file", "/Common/ImgUpload/");
3     });

其中$(".houseImgUpload")是整個上傳控件的外部DIV：

1 <div class="right houseImgUpload">
2    <i class="button">點擊上傳圖片</i><i class="prompt">（單個文件大小不能超過200KB）</i>
3    <input class="file-input" type="file" name="file" multiple="true" accept="image/*" onchange="imgFileUpload.fileUploadChange(this);"/>
4    <div class="imgShow">
5    </div>
6 </div>

OK，一看就明白，input[type=file]是隱藏的，點擊button的時候觸發input[type=file]的點擊事件，詳見第3點的21-30行。

  ---  得說一句： multiple="true" 是開啓多文件上傳，這個並不能兼容全部瀏覽器。

最後還差一個css的樣式

 1 /*
 2     多文件上傳 樣式表
 3 */
 4 
 5 .houseImgUpload {
 6     width: 600px;
 7     float: left;
 8 }
 9 
10     .houseImgUpload i.button {
11         height: 30px;
12         width: 220px;
13         background-color: #ff4400;
14         color: #ffffff;
15         display: block;
16         line-height: 30px;
17         font-size: 14px;
18         text-align: center;
19         border-radius: 3px;
20         -moz-border-radius: 3px;
21         -ms-border-radius: 3px;
22         -webkit-border-radius: 3px;
23         cursor: pointer;
24         float: left;
25     }
26 
27     .houseImgUpload i.prompt {
28         height: 30px;
29         line-height: 30px;
30         float: left;
31     }
32 
33     .houseImgUpload input.file-input {
34         display: none;
35     }
36 
37     .houseImgUpload div.imgShow {
38         height: auto;
39         width: 100%;
40         margin-top: 32px;
41     }
42 
43         .houseImgUpload div.imgShow i.list {
44             float: left;
45             position: relative;
46             width: 100px;
47             height: 120px;
48             display: block;
49             margin-left: 10px;
50             margin-top: 10px;
51         }
52 
53             .houseImgUpload div.imgShow i.list img {
54                 width: 100px;
55                 height: 100px;
56             }
57 
58             .houseImgUpload div.imgShow i.list i {
59                 position: absolute;
60                 top: 102px;
61                 left: 30px;
62                 cursor: pointer;
63             }

 

    OK，以上就是此次一個多文件上傳的小控件的所有代碼了。

    沒有仔細的講一些代碼，是由於以爲都是些常規的代碼，沒有什麼特別有含量的...因此，直接貼代碼了。

 

整理成了一個包，放在csdn了，地址：

 MVC+ajaxfileupload實現多圖片同時上傳

 

    原創文章，代碼都是從本身項目裏貼出來的。轉載請註明出處哦，親~~~