.NET MVC实现多图片上传并附带参数(ajaxfileupload)
2016-05-19 10:28
399 查看
做网站呢,都免不了要做图片上传。
还记得去年做微信的时候用WebAPI+ajaxfileupload.js做了一个能够附带参数上传的功能,博文地址:.NET WebAPI 实现图片上传(包括附带参数上传图片)
这段时间在做一个网站,用的MVC5.0,有一个上传多张图片的需求...刚开始用的flash插件,这不前两天Google发文说chrome浏览器即将把HTML5作为默认设置了,flash只是对固定的几个大网站做默认了...啊哦,leader这不就顺带给咱找了点事做“把flash插件干掉,弄一个HTML5的”...
呵呵~~
也不知道leader到底知不知道啥叫HTML5,谁叫人是leader呢。
那咱就做呗?!!!
经过一天的奋战,最终效果如下:
好吧,样式是自己写的,low了点...将就着看。
废话不多说,直接上代码:
1.先来看看MVC的action。博主的网站有文件服务器,走的内网共享,要是直接存本地相信大家都会...
这里博主只是简单限制了单个文件大小,咱们可以在config里面限制一下整个大小,或者限制一下单次提交图片个数什么的....
2.再来看看前端代码,ajaxfileupload.js依然是用的我以前改过的一个版本,下载地址:支持附带参数提交的ajaxfileupload.js文件
3.自己写的一个imgupload的js包,没有做成jQuery扩展,简单的做了一个包,暴露了几个接口,方便调用。有兴趣的可以做成jQuery扩展
具体代码,应该都能看懂了... init是初始化方法,页面加载完成时调用一下:
其中$(".houseImgUpload")是整个上传控件的外部DIV:
OK,一看就明白,input[type=file]是隐藏的,点击button的时候触发input[type=file]的点击事件,详见第3点的21-30行。
--- 得说一句: multiple="true" 是开启多文件上传,这个并不能兼容所有浏览器。
最后还差一个css的样式
OK,以上就是这次一个多文件上传的小控件的全部代码了。
没有仔细的讲一些代码,是因为觉得都是些常规的代码,没有什么特别有含量的...所以,直接贴代码了。
整理成了一个包,放在csdn了,地址:
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里面限制一下整个大小,或者限制一下单次提交图片个数什么的....
/// <summary> /// 图片上传 [FromBody]string type /// 单个图片最大支持200KB /// </summary> /// <returns></returns> [HttpPost] public JsonResult ImgUpload() { var result = new List<ImgUploadResult>(); // 定义允许上传的文件扩展名 const string fileTypes = "gif,jpg,jpeg,png,bmp"; // 最大文件大小(200KB) const int maxSize = 205000; // 获取附带POST参数值 var type = Request["type"]; // 设置上传目录 var imgPath = ""; switch (type) { case "file": imgPath = ConfigurationManager.AppSettings["HouseImgPath"]; break; case "video": imgPath = ConfigurationManager.AppSettings["HouseVideoPath"]; break; case "information": imgPath = ConfigurationManager.AppSettings["InformationPath"]; break; } // 存储文件服务器IP(内网) string fileComputerIP = ConfigurationManager.AppSettings["FileComputerIP"]; for (var fileId = 0; fileId < Request.Files.Count; fileId++) { var curFile = Request.Files[fileId]; if (curFile.ContentLength < 1) {continue;} else if (curFile.ContentLength > maxSize) { return this.JsonFormatError("上传文件中有图片大小超出200KB!"); } var fileExt = Path.GetExtension(curFile.FileName); if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1) { return this.JsonFormatError("上传文件中包含不支持文件格式!"); } else { // 存储文件名 string fullFileName = type + "_" + DateTime.Now.ToString("yyyyMMddhhmmssff") + CreateRandomCode(8) + fileExt; // 存储路径(绝对路径) string virtualPath = string.Format(@"\\{0}\{1}\{2}", fileComputerIP, imgPath, fullFileName); try { curFile.SaveAs(virtualPath); // 文件服务器端口号IP string fileComputerIPPort = ConfigurationManager.AppSettings["FileComputerIPNumber"]; result.Add(new ImgUploadResult() { FullFileName = fullFileName, ImgUrl = string.Format(@"http://{0}/{1}/{2}", (fileComputerIP + ":" + fileComputerIPPort), imgPath, fullFileName) }); } catch (Exception exception) { throw new Exception("上传失败!", exception); } } } return this.JsonFormatSuccess(result); } /// <summary> /// 生成指定长度的随机码。 /// </summary> private string CreateRandomCode(int length) { 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" }; StringBuilder randomCode = new StringBuilder(); Random rand = new Random(); for (int i = 0; i < length; i++) { randomCode.Append(codes[rand.Next(codes.Length)]); } return randomCode.ToString(); }
2.再来看看前端代码,ajaxfileupload.js依然是用的我以前改过的一个版本,下载地址:支持附带参数提交的ajaxfileupload.js文件
3.自己写的一个imgupload的js包,没有做成jQuery扩展,简单的做了一个包,暴露了几个接口,方便调用。有兴趣的可以做成jQuery扩展
/// ------------------------- /// 图片文件上传 /// ------------------------- var imgFileUpload = (function () { var $This = []; var ImgType = ""; var URL = ""; // 构造方法 function imgFileUpload($this, imgType, url) { $This = $this; ImgType = imgType; URL = url; _bindUploadEvent(); }; // 注册上传控件事件 function _bindUploadEvent() { $.each($This, function (i, item) { $(item).find("i.button").click(function () { $(item).find("input").click(); }); }); } // 上传文件控件change var fileUploadChange = function (fileControl) { var file = fileControl.files[0]; var reader = new FileReader(); reader.onload = function (evt) { var $par = $(fileControl).parent(); // 执行上传 _uploadImage($par); } reader.readAsDataURL(file); } // 上传文件 function _uploadImage($box) { var files = $box.find("[type=file]"); $(files).each(function (index, item) { if (item.files.length) { $.ajaxFileUpload({ url: URL, secureuri: false, fileUpload: item, dataType: 'json', data: { "type": ImgType }, success: function (data, status) { var str = $(data).text(); var result = JSON.parse(str); if (result.Code == 0) { var html = ""; $.each(result.Data, function (i, dat) { html += "<i class=\"list\"><img src=\"" + dat.ImgUrl + "\" sname=\"" + dat.FullFileName + "\" /><i onclick=\"imgFileUpload.deletedImg(this)\">删除</i></i>"; }); $box.find("div.imgShow").append(html); } else { alert(result.Message); } }, error: function (data, status, e) { alert("上传失败!"); } }); } }); } // 图片删除事件 function imgDeleted($i) { $($i).parent().remove(); } // 获取已上传图片名称组合串 function getImgNameStr() { debugger var result = ""; var $img = $("div.houseImgUpload i.list img"); $.each($img, function (i, item) { if (i == $img.length - 1) { result += $(item).attr("sname"); } else { result += $(item).attr("sname") + ","; } }); return result; } return { init: function ($this, imgType, url) { imgFileUpload($this, imgType, url); }, fileUploadChange: function ($controller) { fileUploadChange($controller); }, deletedImg: function ($i) { imgDeleted($i); }, getImgNameStr: function () { return getImgNameStr(); } }; })();
具体代码,应该都能看懂了... init是初始化方法,页面加载完成时调用一下:
$(document).ready(function () { imgFileUpload.init([$(".houseImgUpload")], "file", "/Common/ImgUpload/"); });
其中$(".houseImgUpload")是整个上传控件的外部DIV:
<div class="right houseImgUpload"> <i class="button">点击上传图片</i><i class="prompt">(单个文件大小不能超过200KB)</i> <input class="file-input" type="file" name="file" multiple="true" accept="image/*" onchange="imgFileUpload.fileUploadChange(this);"/> <div class="imgShow"> </div> </div>
OK,一看就明白,input[type=file]是隐藏的,点击button的时候触发input[type=file]的点击事件,详见第3点的21-30行。
--- 得说一句: multiple="true" 是开启多文件上传,这个并不能兼容所有浏览器。
最后还差一个css的样式
/* 多文件上传 样式表 */ .houseImgUpload { width: 600px; float: left; } .houseImgUpload i.button { height: 30px; width: 220px; background-color: #ff4400; color: #ffffff; display: block; line-height: 30px; font-size: 14px; text-align: center; border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -webkit-border-radius: 3px; cursor: pointer; float: left; } .houseImgUpload i.prompt { height: 30px; line-height: 30px; float: left; } .houseImgUpload input.file-input { display: none; } .houseImgUpload div.imgShow { height: auto; width: 100%; margin-top: 32px; } .houseImgUpload div.imgShow i.list { float: left; position: relative; width: 100px; height: 120px; display: block; margin-left: 10px; margin-top: 10px; } .houseImgUpload div.imgShow i.list img { width: 100px; height: 100px; } .houseImgUpload div.imgShow i.list i { position: absolute; top: 102px; left: 30px; cursor: pointer; }
OK,以上就是这次一个多文件上传的小控件的全部代码了。
没有仔细的讲一些代码,是因为觉得都是些常规的代码,没有什么特别有含量的...所以,直接贴代码了。
整理成了一个包,放在csdn了,地址:
MVC+ajaxfileupload实现多图片同时上传
原创文章,代码都是从自己项目里贴出来的。转载请注明出处哦,亲~~~
相关文章推荐
- python2.7下同步华为云照片的爬虫程序实现
- svn代码量统计工具StatSVN的使用
- Mysql主从配置,实现读写分离
- 【bzoj2844】albus就是要第一个出场 高斯消元
- oracle(行转列)中有关case和decode的用法及比较
- android动画之初学
- UI基础 获取当前屏幕显示的viewcontroller
- hive中的NULL(hive空值处理)
- hive中的NULL(hive空值处理)
- iOS计算文字高度
- 淘宝FastJson使用
- Java数组的12个常用方法
- bigDecimal使用方法详解(转载)
- Linux Debian 上安装 JDK7
- c++中类中私有成员的调用?
- Java时间函数整理
- Spring 切入点配置
- oracle的clob字段不为空的判断
- 349. Intersection of Two Arrays[][
- 欢迎使用CSDN-markdown编辑器