问题:在模态框中添加图片并不会得到你上传图片的名称,无法存到数据
下面介绍两个方法,都是可以得到图片名称的。
第一种 前面如何加载模态框就不写了,上篇有写,这里只是为得到图片写的
//需要添加一个JS
<script src="~/Scripts/jquery.form.js"></script> //用来添加图片的 表单异步提交库
@*模态框开始*@
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<form method="post" id="mm" enctype="multipart/form-data"> //form 表单需要, <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4> </div> <div class="modal-body">
<div class="control-group">
<label class="control-label" for="FileUpload1">上传图片</label>
<div class="controls">
<input class="input-file uniform_on" id="FileUpload1" name="FileUpload1" type="file">
</div>
</div> </div> </div><!-- /.modal-content --> </div><!-- /.modal -->
</from>
</div>@*模态框结束*@
JS代码:
//添加 到数据库 $("#sum").click(function () { //模态框中添加图片 两种做法
ajaxSubmit是个方法,引用了form.js这个库,此方法才有效 $("#mm").ajaxSubmit({ url: "@Url.Action("AddPric")", //访问这个方法用来得到图片名称 type: "post", success: function (data) { img = data; //data就是名称了 alert(data); });
后台:
/// <summary> /// 图片名称 /// </summary> /// <returns></returns> public ActionResult AddPric() { if (Request.Files["FileUpload1"] != null) { string savePath = Server.MapPath("~/Content/img");//建立虚拟路径,需要存在你的项目中的 //Request.Files["FileUpload"].FileName 上传文件的完整路径 //string name = Request.Files["FileUpload1"].ContentType; //image/jpeg string ext = Path.GetExtension(Request.Files["FileUpload1"].FileName); //获取上传文件的扩展名 string fileName = ""; switch (ext) { case ".jpg": case ".jpeg": case ".png": case ".gif": case ".bmp": case ".rar": case ".zip": if (Request.Files["FileUpload1"].ContentLength < 1024000) { fileName = Guid.NewGuid().ToString().Substring(0, 8) + ext; //新的图片名称 Guid一个36位的随机数 Request.Files["FileUpload1"].SaveAs(savePath + "\\" + fileName); //保存到项目中 } break; } return Content(fileName); //返回图片名称 } else { return Content(""); } }
第二种:
<html> <head> <title>Index</title> <script src="~/Scripts/jquery-1.8.2.js"></script> //这两个JS需要引用 模板里面的js库 <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> <script> $(function () { $("#btn").click(function () { //将表单封装成一个表单数据对象 var formData = new FormData($("#ff")[0]); //必 $.ajax({ url: '@Url.Action("aaa")', type: "POST", data: formData, contentType: false, //必须false才会避开jQuery对 formdata 的默认处理 processData: false, //必须false才会自动加上正确的Content-Type success: function (data) { alert(data) } }); }); }); </script> </head> <body> @*//注意:可以将表单代码放入模态框中,整个提交过程不会刷新页面,使用AJAX将文件提交到服务器端,之后的处理和一般上传没有区别*@ <form action="/" method="post" id="ff" enctype="multipart/form-data"> <div> <input type="text" name="tt" id="tt" /> <input type="file" name="file" id="file" /> <input type="button" value="submit" id="btn" /> </div> <div id="dd"></div> </form> </body> </html>
后台:
public ActionResult aaa() { return Content(Request.Files[0].FileName + "|" + Request.Form[0]); }