.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了，地址：
时间： 2024-10-15 13:01:38