問題：在模態框中添加圖片並不會得到你上傳圖片的名稱，無法存到數據
下面介紹兩個方法，都是可以得到圖片名稱的。
第一種 前面如何加載模態框就不寫了，上篇有寫，這里只是為得到圖片寫的
//需要添加一個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]); }