还记得去年做微信的时候用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 += "<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 },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">点击上传图片</i><="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 }
没有仔细的讲一些代码，是因为觉得都是些常规的代码，没有什么特别有含量的...所以，直接贴代码了。
整理成了一个包，放在csdn了，地址：
原文链接：https://www.f2er.com/ajax/162179.html