.NET MVC实现多图片上传并附带参数（ajaxfileupload）

来源：互联网发布：java 就业班编辑：程序博客网时间：2024/05/16 01:03

做网站呢，都免不了要做图片上传。

还记得去年做微信的时候用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                 else50                 {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                     try58                     {59                         curFile.SaveAs(virtualPath);60                         // 文件服务器端口号IP61                         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实现多图片同时上传

2 0