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

发布时间：2020-12-16 01:39:03 所属栏目：百科来源：网络整理

导读：做网站呢，都免不了要做图片上传。还记得去年做微信的时候用WebAPI+ajaxfileupload.js做了一个能够附带参数上传的功能，博文地址：.NET WebAPI 实现图片上传（包括附带参数上传图片）这段时间在做一个网站，用的MVC5.0，有一个上传多张图片的需求...刚开始

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

还记得去年做微信的时候用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             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[HouseImgPath24                     break;
25                 video26                     imgPath = ConfigurationManager.AppSettings[HouseVideoPath27                     28                 information29                     imgPath = ConfigurationManager.AppSettings[InformationPath30                     31             }
32              存储文件服务器IP(内网)
33             string fileComputerIP = ConfigurationManager.AppSettings[FileComputerIP34 
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                     上传文件中包含不支持文件格式!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[FileComputerIPNumber62                         result.Add(new ImgUploadResult()
63                         {
64                             FullFileName = fullFileName,65                             ImgUrl = http://{0}/{1}/{2}",(fileComputerIP + :" + fileComputerIPPort),fullFileName)
66                         });
67                     }
68                     catch (Exception exception)
69                     {
70                         throw new Exception(上传失败!71                     }
72                 }
73             }
74             this.JsonFormatSuccess(result);
75         }
76 
77         78          生成指定长度的随机码。
79         80         private string CreateRandomCode(int length)
81         {
82             string[] codes = new string[36] { 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ" };
83             StringBuilder randomCode = new StringBuilder();
84             Random rand = new Random();
85             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( 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,128); line-height:1.5!important"> 49 if (item.files.length) { 50 $.ajaxFileUpload({ 51 url: URL,128); line-height:1.5!important"> 52 secureuri: false,128); line-height:1.5!important"> 53 fileUpload: item,128); line-height:1.5!important"> 54 dataType: 'json',128); line-height:1.5!important"> 55 data: { "type": ImgType },128); line-height:1.5!important"> 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,dat) { 63 html += "<img src="" + dat.ImgUrl + "" sname="" + dat.FullFileName + "" />删除"; 64 }); 65 $box.find("div.imgShow").append(html); 66 } else { 67 alert(result.Message); 68 } 69 },128); line-height:1.5!important"> 70 error: 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,128); line-height:1.5!important"> 90 if (i == $img.length - 1) { 91 result += $(item).attr("sname"); 92 } 93 result += $(item).attr("sname") + ","; 94 } 95 }); 96 97 return result; 98 } 99 100 101 return { 102 init: function ($103 imgFileUpload($104 },128); line-height:1.5!important">105 fileUploadChange: function ($controller) { 106 fileUploadChange($controller); 107 },128); line-height:1.5!important">108 deletedImg: function ($i) { 109 imgDeleted($i); 110 },128); line-height:1.5!important">111 getImgNameStr: 112 return getImgNameStr(); 113 } 114 }; 115 116 })();

具体代码，应该都能看懂了... init是初始化方法，页面加载完成时调用一下：

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

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

1 <div class="right houseImgUpload"> 2 i ="button">点击上传图片<="prompt">（单个文件大小不能超过200KB）3 input ="file-input" type="file" name multiple="true" accept="image/*" onchange="imgFileUpload.fileUploadChange(this);"/> 4 ="imgShow"5 div6 >

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:17 font-size: 14px; 18 text-align: center; 19 border-radius: 3px; 20 -moz-border-radius:21 -ms-border-radius:22 -webkit-border-radius:23 cursor: pointer; 24 float:25 } 26 27 .houseImgUpload i.prompt { 28 29 30 31 } 32 33 .houseImgUpload input.file-input { 34 none; 35 } 36 37 .houseImgUpload div.imgShow { 38 auto; 39 100%; 40 margin-top: 32px; 41 } 42 43 .houseImgUpload div.imgShow i.list { 44 float:45 position: relative; 46 width: 100px; 47 height: 120px; 48 display:49 margin-left: 10px; 50 margin-top:51 } 52 53 .houseImgUpload div.imgShow i.list img { 54 width:55 height:56 } 57 58 .houseImgUpload div.imgShow i.list i { 59 position: absolute; 60 top: 102px; 61 left:62 cursor:63 }

OK，以上就是这次一个多文件上传的小控件的全部代码了。

没有仔细的讲一些代码，是因为觉得都是些常规的代码，没有什么特别有含量的...所以，直接贴代码了。

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

MVC+ajaxfileupload实现多图片同时上传

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!