1200字范文 > ASP.Net MVC3 图片上传详解（form.js bootstrap）

ASP.Net MVC3 图片上传详解（form.js bootstrap）

时间：2023-04-05 08:51:29

图片上传的插件很多，但很多时候还是不能切合我们的需求，我这里给大家分享个我用一个form,file实现上传四张图片的小demo。完全是用jquery前后交互，没有用插件。

最终效果图如下：

玩过花田人可能有些眼熟，原型就是来自于花田网中的图片上传。

引用的脚本有：

基本思路：用户点击相关div触发file元素打开浏览框----》用setInterval不断检测file文件是否选中文件---》选中之后触发form自动提交到后台---》后台将文件存储到临时文件夹返回图片在临时文件夹的地址---》窗口提示上传功能并预览图片---》用户点击发布---》后台保存图片(移动到指定文件夹,并存入数据库)

整个过程form和file都是隐藏的。另外的效果

1. 开始的时候只显示一个上传框,前一个上传完成后，显示下一个上传框。并总是显示在最后面。

2. 有图片的时候才能提交和输入描述。

3.上传成功之后,删除后才能再次上传。

Html+css

.uploadbox {float: left;width: 115px;height: 115px;background-color: #eeeeee;margin-right: 10px;color: white;text-align: center;cursor: pointer;position: relative;display: none;}.uploadbox:hover {background-color: #b4b4b4;}.stt{font-size: xx-small;display: block;}.add{vertical-align: baseline;display: block;height: auto;font-size: 8em; height: 40px;padding: 10px;margin-top: 30px}.imgcontainer{width: 100%;height: 100%} .imgcontainer img{max-height: 115px;max-width: 115px;}.inputdiv{clear: both;display: block;padding-top: 10px;}#Remark{width:478px;}.infospan{display: none; height: 20px;position: absolute;bottom: 0;right: 0;width: 100%;background-color: #00bfff;z-index: 1;clear: both;opacity: 0.8;}.closespan{display: none; position: absolute;right: -7px;top: -7px;width: 14px;height: 14px;border-radius: 7px;background-color: white;border: 1px gainsboro solid;color: gray;font-weight: bold;font-size: medium;line-height: 16px;} .closespan:hover{color: red;}#imgupload form{display: none;} .imguploadmessage{font-size: small;color: green;float: left;margin-left: 10px;}.carclose{cursor: pointer; background-color: white;opacity: 1;position: absolute;z-index: 99;top:0px;right: -40px;width: 40px;height:40px;border-radius: 20px;text-align: center;line-height: 40px;font-size: 2em;color: gray;}.carclose:hover{color: green;background-color: #eeeeee}

<div id="imgupload" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4>上传图片</h4> </div><div class="modal-body"><div class="uploadbox" data-count="0" style="display: inline;"><span class="closespan" title="删除照片">×</span><div class="imgcontainer"><div class="add">+</div><div class="stt">点击上传</div></div><span class="infospan"><img src='../../Content/Photos/loading.gif' />正在上传...</span></div> <div class="uploadbox" data-count="0" ><span class="closespan" title="删除照片">×</span><div class="imgcontainer"><div class="add">+</div><div class="stt">点击上传</div></div><span class="infospan"> <img src='../../Content/Photos/loading.gif' />正在上传...</span></div> <div class="uploadbox"data-count="0" ><span class="closespan" title="删除照片">×</span><div class="imgcontainer"><div class="add">+</div><div class="stt">点击上传</div></div><span class="infospan"> <img src='../../Content/Photos/loading.gif' />正在上传...</span></div> <div class="uploadbox"data-count="0" ><span class="closespan" title="删除照片">×</span><div class="imgcontainer"><div class="add">+</div><div class="stt">点击上传</div></div><span class="infospan"> <img src='../../Content/Photos/loading.gif' />正在上传...</span></div> <div class="inputdiv"><input type="text" disabled="disabled" id="Remark" name="Remark" placeholder="补充说明下~"/></div></div><div class="modal-footer">上传大小在8k-10M之间 <span class="imguploadmessage"></span><button class="btn btn-success " disabled="disabled" id="imgsubmit">发布</button><form action="/User/UpLoadPhoto" method="POST" enctype="multipart/form-data" name="ImgForm" id="ImgForm"><input type="file" name="file" id="imgFlie" required="required" /><input type="submit" name="subt" value="上传图片" /></form></div></div>

Jquery:

//图片上传-------------------------------------imgupload---------------------var imgbox = {};//用来获取当前点击的 uploadbox var childs = $(".imgcontainer:eq(0)").html();// 先保存内部元素，上传完成之后方便恢复到最初状态$(".uploadbox").click(function () {var tag = $(this).attr("data-count");//用来判断是否已经含有照片if (tag == "1") return false;$("#imgFlie").click();imgbox = $(this);var stm1 = setInterval(function () {var imgstr = $("#imgFlie").val(); //检测file元素是否已经含有文件if (imgstr != "") {clearInterval(stm1);$("#ImgForm input[type='submit']").click();}}, 500);return false;});// 取消照片$(".closespan").click(function (e) {e.stopPropagation();var sum = $(".uploadbox img").length;// 保证有一个框可以让用户再次选择需要显示childs 设置data-count属性必要的再隐藏var imgsrc = $(this).next().find("img").attr("src");$(this).next().html("").append(childs);// 隐藏关闭和成功提示$(this).hide();$(this).siblings(".infospan").hide();$(this).parent().attr("data-count", 0).insertBefore($(".inputdiv"));;if (sum < 4) {//说明此时是有一个再准备状态，这个可以直接做删除处理 // 设置data-count 并隐藏父级$(this).parent().hide();//需要移位保证准备状态的总是在最后一个}// 清除session 减少一个字符串if (imgsrc != undefined) {$.post("/User/DeleteImg", { str: imgsrc }, function () {});}if (sum == 1) {$('#Remark,#imgsubmit').attr("disabled", "disabled");// 说明这个时候还没有图片上传，所以要禁止发布键和描述框}});//----------上传图片---------------------------------------------$("#imgsubmit").click(function () {var imgcontent = $.trim($("#Remark").val());$.post("/User/SaveImgs", { content: imgcontent }, function (data) {if (data == 1) {//清除content$(".imgcontainer").html(childs);//隐藏进度条和关闭键$(".closespan,.infospan").hide();$(".imguploadmessage").html("上传成功!");//禁止输入框和提交按钮$('#Remark,#imgsubmit').attr("disabled", "disabled");//去掉data-count 属性显示第一个；$(".uploadbox").attr("data-count", 0).hide().eq(0).show();//清空$("#Remark").val("");var stt = setTimeout(function () {$("#imgupload").modal('hide');$(".imguploadmessage").html("");clearTimeout(stt);}, 1000);}});});$('#ImgForm').ajaxForm({//用到form.js 提交form beforeSend: function () {imgbox.find(".infospan").show();//显示正在上传...},success: function (data) {$("#imgFlie").val("");// imgbox.find(".imgcontainer").html(data);//.hide()var img = imgbox.find(".imgcontainer").find("img").attr("src");if (img != undefined) {//表示上传成功//解禁$('#Remark').removeAttr("disabled");$('#imgsubmit').removeAttr("disabled");imgbox.find(".infospan,.closespan").show();imgbox.find(".infospan").html("上传成功！");//显示下一个//imgbox.next().show();$(".uploadbox:hidden").eq(0).show();imgbox.attr("data-count", "1");} else {imgbox.find(".infospan,.closespan").hide();}// alert(img);}, complete: function (xhr) {$("#imgFlie").val("");}});

后台controller的代码

[HttpPost]public void UpLoadPhoto(HttpPostedFileBase file){var res = CheckImg(file);if (res == "ok"){var fileName = file.FileName;//Path.GetExtension() 也许可以解决这个问题，先不管了。var pathtemp = bine(Server.MapPath("../Content/TempFile/"), fileName);//先存入临时文件夹var scrtemp = bine("../../Content/TempFile/", fileName);//图片展示的地址var list = Session["Imgscr"] as List<string>;var slist = Session["ImgServerscr"] as List<string>;if (list != null){list.Add(scrtemp);}else{list = new List<string> { scrtemp };Session["Imgscr"] = list;}if (slist != null){slist.Add(pathtemp);}else{slist = new List<string> { pathtemp };Session["ImgServerscr"] = slist;}file.SaveAs(pathtemp);Response.Write("<img src='../../Content/TempFile/" + fileName + "' /> ");}else{Response.Write(res);}}/// <summary>/// 删除预览中的照片/// </summary>/// <param name="str">这个str 已经是处理过的，不是之前上传的图片名称</param>public void DeleteImg(string str){//删除地址删除文件var list = Session["Imgscr"] as List<string>;if (list == null) return;var index = list.IndexOf(str);var slist = Session["ImgServerscr"] as List<string>;if (slist != null && index != -1){var imgone = slist[index];if (imgone != null){var img = new FileInfo(imgone);if (img.Exists) img.Delete();}}list.Remove(str);}private string CheckImg(HttpPostedFileBase file){if (file == null) return "图片不能空！";if (file.ContentLength / 1024 > 8000){return "图片太大";}if (file.ContentLength / 1024 < 10){return "图片太小！";}var image = GetExtensionName(file.FileName).ToLower();if (image != ".bmp" && image != ".png" && image != ".gif" && image != ".jpg" && image != ".jpeg")// 这里你自己加入其他图片格式，最好全部转化为大写再判断，我就偷懒了 {return "格式不对";}var scrtemp = bine("../../Content/TempFile/", file.FileName);//图片展示的地址var list = Session["Imgscr"] as List<string>;if (list != null && list.Find(n => n == scrtemp) != null){return "同样的照片已经存在！";}return "ok";}public JsonResult SaveImgs(string content){var uid = CheckValid();if (_uName == null) _uName = GetUserNameById(uid);string path = bine(HttpContext.Server.MapPath("../Content/UploadFiles/"), _uName, "Photos", "ImgBox");if (!Directory.Exists(path)){Directory.CreateDirectory(path);}var list = Session["Imgscr"] as List<string>;var finallist = new List<string>();if (list == null) return Json(0);foreach (var str in list){var scrtemp1 = Server.MapPath(str.Substring(3, str.Length - 3));//去掉第一个../var img = new FileInfo(scrtemp1);if (img.Exists){var image = GetExtensionName(img.Name);//处理照片名称var imgname = string.Format("{0:yyyMMdd}", DateTime.Now).Replace("/", "") + DateTime.Now.Ticks.ToString(CultureInfo.InvariantCulture).Substring(7, 11) + image;var scrdestination = bine(HttpContext.Server.MapPath("../Content/UploadFiles/"), _uName, "Photos", "ImgBox", imgname);var scrshow = bine(("../../Content/UploadFiles/"), _uName, "Photos", "ImgBox", imgname);finallist.Add(scrshow);//移动照片img.MoveTo(scrdestination);//存入imgboxvar box = new Iamgbox{ActionTime = DateTime.Now,BoxName = _uName,ImgUrl = scrshow,IsValid = true, //默认是正规合适的图片不合适在检举PraiseCount = 0,Remark = content,UserId = uid,VisitCount = 0,};LoveDb.Add(box);};}if (finallist.Count() != 0){var sbstr = new StringBuilder("<br/><div class='imgtigger'>");foreach (var str in finallist){sbstr.Append("<img src='" + str + "' />");}sbstr.Append("</div>");var state = new State{ActionTime = DateTime.Now,Content = (content == "" ? string.Format("刚刚上传了{0}张照片:", finallist.Count) : content)+sbstr,PraiseCount = 0,StateType = StateType.Image.ToString(),UserId = uid};LoveDb.Add(state);Session.Remove("Imgscr");Session.Remove("ImgServerscr");}return Json(1);}public string GetExtensionName(string fileName){if (fileName.LastIndexOf("\\", StringComparison.Ordinal) > -1)//在不同浏览器下，filename有时候指的是文件名，有时候指的是全路径，所有这里要要统一。 {fileName = fileName.Substring(fileName.LastIndexOf("\\", StringComparison.Ordinal) + 1);//IndexOf 有时候会受到特殊字符的影响而判断错误。加上这个就纠正了。 }return Path.GetExtension(fileName.ToLower());}

到这，这个过程就完成了，希望对你有帮助。

Demo 下载地址：/detail/stoneniqiu/6581841

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。