吃水不忘挖井人,如果对你有帮助,请说声谢谢。如果你要转载,请注明出处。谢谢!
异步提交时,出现图片不能上传。
起初我定格在 System.Web.Mvc 中。查询源码时,也是没有问题的。那问题出现在哪 里?
答案:JS
jquery.unobtrusive-ajax.js
经查看,修改如下Demo:
function asyncRequest(element, options) { var confirm, loading, method, duration, enctype, is_async = true; confirm = element.getAttribute("data-ajax-confirm"); if (confirm && !window.confirm(confirm)) { return; } loading = $(element.getAttribute("data-ajax-loading")); duration = element.getAttribute("data-ajax-loading-duration") || 0; $.extend(options, { type: element.getAttribute("data-ajax-method") || undefined, url: element.getAttribute("data-ajax-url") || undefined, beforeSend: function (xhr) { var result; asyncOnBeforeSend(xhr, method); result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(this, arguments); if (result !== false) { loading.show(duration); } return result; }, complete: function () { loading.hide(duration); getFunction(element.getAttribute("data-ajax-complete"), ["xhr", "status"]).apply(this, arguments); }, success: function (data, status, xhr) { asyncOnSuccess(element, data, xhr.getResponseHeader("Content-Type") || "text/html"); getFunction(element.getAttribute("data-ajax-success"), ["data", "status", "xhr"]).apply(this, arguments); }, error: getFunction(element.getAttribute("data-ajax-failure"), ["xhr", "status", "error"]) }); enctype = element.getAttribute("enctype"); if (enctype == "multipart/form-data") {
var form = $(element)[0];
var input_files = $(form).find(":file");
var fileSize = 0;
for (var i = 0; i < input_files.length; i++) {
for (var j = 0; j < input_files[i].files.length; j++) {
fileSize += input_files[i].files[j].size;
}
}
if (fileSize > 1024) {
alert("上传文件大于10M,不允许上传");
return;
}
var formData = new FormData(form);
$.extend(options, { async: false, cache: false, contentType: false, processData: false, data: formData }); is_async = false; } if (is_async) options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" }); method = options.type.toUpperCase(); if (!isMethodProxySafe(method)) { options.type = "POST"; if (is_async) options.data.push({ name: "X-HTTP-Method-Override", value: method }); } $.ajax(options); }
@{ ViewBag.Title = "Index"; } <script src="~/Scripts/jquery-1.8.2.js"></script> <script src="~/Scripts/modernizr-2.6.2.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> @model MvcApplication.Models.TestModel @using (Ajax.BeginForm("TestAjax", "Home", null, new AjaxOptions() { HttpMethod = "POST" ,OnSuccess="Success"}, new { id = "f1", enctype = "multipart/form-data"})) { @Html.TextBoxFor(S => S.Name) @Html.TextBoxFor(S => S.Age) @Html.TextBoxFor(S => S.fileBase, new { type = "file" }) @Html.TextBoxFor(S => S.IsDel, new { Value = "1" }) <button type="submit">OK</button> } <script type="text/javascript"> function Success(data) { alert(data.Name); } </script>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcApplication.Controllers { public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } public ActionResult TestAjax(Models.TestModel model) { model.fileBase = null; return Json(model, JsonRequestBehavior.AllowGet); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication.Models { public class TestModel { public HttpPostedFileBase fileBase { get; set; } public string Name { get; set; } public int Age { get; set; } public bool IsDel { get; set; } } }
讓眾人的薪枝構起這團熱情的火焰