MVC表单异步提交图片失败！求解！
0
悬赏园豆：5
[已解决问题]
解决于 2014-05-14 13:48
<!DOCTYPE html> <html> <head> <title>UpImg</title> <script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script> <script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script> </head> <body> <div> @{using (Ajax.BeginForm("UpFile", "Test", new { }, new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "div1" }, new { enctype = "multipart/form-data" })) { <input type="file" name="upfile" id="upfile" /><br /> <input type="submit" value="上传吧" /> } } <hr /> <div id="div1"> </div> </div> </body> </html>
Controller
[HttpPost] public ActionResult UpFile(HttpPostedFileBase upImg)//这里的upImg始终是null { HttpPostedFileBase file = Request.Files[0];//在这里获取到的Request中的Files的数量始终是零，始终获取不到文件 if (file.ContentLength > 0) { string finallPath = DateTime.Now.Tostring("yyyy-MM=dd")+".jpg"; file.SaveAs(finallPath); }
return Content("no"); }
问题如上述代码注释。求解！
最佳答案
1
MVC自带的异步表单本来就不能提交图片。
可以考虑使用插件：AjaxForm，参考http://www.cnblogs.com/china-li/archive/2012/12/12/2800144.html
收获园豆：5
其他回答(4)
0
异步表单提交,不能提交文件.异步上传文件.和异步表单技术实现是不一样的
0
除了iframe或者纯html表单模式，无法异步提交表单上传文件。如果非要这样，可以参考我的javascript代码
window.addEventListener("submit", function (e) {
var form = e.target;
if (form.getAttribute("enctype") === "multipart/form-data") {
if (form.dataset.ajax) {
e.preventDefault();
e.stopImmediatePropagation();
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (form.dataset.ajaxUpdate) {
var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
if (updateTarget) {
updateTarget.innerHTML = xhr.responseText;
}
}
}
};
xhr.send(new FormData(form));
}
}
}, true);
0
把图片放到一个Form中 用Ajax提交,需要引用文js件 http://malsup.github.io/jquery.form.js
<form id="summaryJpgForm" enctype="multipart/form-data" method="POST">
<input type="file" id="summaryJpgFile" name="summaryJpgFile" /> <input type="submit" id="btnsummaryJpg" value="上传文件" /> </form>
var uploadWordOptions = { url: '/Conrtroller/UpFile, success: function (data) { alert("上传成功!"); } };
后端代码和你的一样，方法上不要用加[HttpPost]
$('#btnsummaryJpg').click(function () { $("#summaryJpgForm").ajaxSubmit(uploadWordOptions); return false; });
少了一步
0
HttpPostedFileBase upImg 这个变量名要和前台<input type="file"/> 这个控件的name一样。