吃水不忘挖井人,如果对你有帮助,请说声谢谢。如果你要转载,请注明出处。谢谢!
异步提交时,出现图片不能上传。
起初我定格在 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; }
}
}