.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了,地址:
原创文章,代码都是从自己项目里贴出来的。转载请注明出处哦,亲~~~