我正在尝试使用Ajax表单保存图像.但我无法获取上传的图片.这是我的索引页面,在此页面中,我正在加载AddItem的partialview.我的Index.Cshtml
@Html.Action("_AddOrUpdateItem","Admin")
我的动作代码
public PartialViewResult _AddOrUpdateItem(int? itemId)
{
//Some Code Here
return PartialView("_AddItem", item);
}
[HttpPost]
public PartialViewResult AddOrUpdateItem(ToolItem toolItem, HttpPostedFileBase toolItemImage)
{
////Some Code Here
return PartialView("_AddItem", toolItem);
}
}
我的ajax形式如下
@using (Ajax.BeginForm("AddOrUpdateItem", "Admin", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data" }))
{
// Some more text boxes here
<input type="file" id="ToolItemImage" name="toolItemImage" />
<input type="submit" value="Save" />
}
我有一个针对此类问题的链接,但就我而言,它不起作用
[HttpPost] AddOrUpdateItem() 方法,是否会影响您的操作?Ajax.BeginForm文件问题,而js是魔术棒.是否有不使用Html.BeginForm和覆盖自己的js提交的原因?IIRC您还应该将其视为集合,而不是链接的答案中的单个文件.在链接中提供了没有附加js脚本的情况下,仅使用Ajax.BeginForm就不可能加载文件,但是在您的代码中却看不到它.无论如何,我强烈建议您使用Jquery Form Plugin来实现此目的.
$('#myForm').ajaxForm(function() { alert("Thank you for your comment!"); }); 但是在这里我要提交form.我不知道ASP MVC,但是要提交带有文件的表格,您必须使用 enctype="multipart/form-data">
所以你的表格一定有这样的东西
<form action"your controller" method="post" enctype="multipart/form-data">
<input type="file" id="ToolItemImage" name="toolItemImage" />
<input type="submit">
</form>
保存Ajax.Begien表单图像保存此Jquery方法,并使用($("#frmUploader").valid())这行代码检查表单的有效性.
@using (Ajax.BeginForm("Create", "Employee", new AjaxOptions()
{
OnBegin = "startBLoading",
OnComplete = "stopBLoading",
OnSuccess = "OnSuccessI"
}, new { enctype = "multipart/form-data", id = "frmUploader" }))
{
<div class=row>
..... Enter the Page View Desgine.....
<button type="submit" class="btn btn-product text-capitaliz">Create</button>
</div>
}
<script type="text/javascript">
window.addEventListener("submit", function (e) {
debugger
if ($("#frmUploader").valid()) {
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)
);
}
}
OnSuccessI();
} else {
e.preventDefault();
}
},
true
);
</script>
I'm trying to Save Image Using Ajax form. But Unable to Get uploaded image in my action. This is my Index Page, In this page I'm loading partialview for Add Item . My Index.Cshtml
@Html.Action("_AddOrUpdateItem","Admin")
My Action Code
public PartialViewResult _AddOrUpdateItem(int? itemId)
{
//Some Code Here
return PartialView("_AddItem", item);
}
[HttpPost]
public PartialViewResult AddOrUpdateItem(ToolItem toolItem, HttpPostedFileBase toolItemImage)
{
////Some Code Here
return PartialView("_AddItem", toolItem);
}
}
And My ajax form is as follow
@using (Ajax.BeginForm("AddOrUpdateItem", "Admin", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data" }))
{
// Some more text boxes here
<input type="file" id="ToolItemImage" name="toolItemImage" />
<input type="submit" value="Save" />
}
I got a link for this same type of problem , But In my case it is not working
[HttpPost] AddOrUpdateItem() method?Ajax.BeginForm when it comes to files, and that the js is the magic wand. Any reason for not using Html.BeginForm and overriding submit with your own js? IIRC you should also treat it as a collection, rather than a single file, as in the answer you linked.It's impossible load file using only Ajax.BeginForm without additional js script,which have been provided in your link and I can't see it in your code.Anyway I strongly recommend use Jquery Form Plugin for such purposes.
$('#myForm').ajaxForm(function() { alert("Thank you for your comment!"); }); But here I I'm submitting form .I dont know ASP MVC but for submitiing a form with file you have to use enctype="multipart/form-data">
so your form must be having something like this
<form action"your controller" method="post" enctype="multipart/form-data">
<input type="file" id="ToolItemImage" name="toolItemImage" />
<input type="submit">
</form>
Save Ajax.Begien Form Image save this Jquery method and also check validation your form using ($("#frmUploader").valid()) this line of code ...
@using (Ajax.BeginForm("Create", "Employee", new AjaxOptions()
{
OnBegin = "startBLoading",
OnComplete = "stopBLoading",
OnSuccess = "OnSuccessI"
}, new { enctype = "multipart/form-data", id = "frmUploader" }))
{
<div class=row>
..... Enter the Page View Desgine.....
<button type="submit" class="btn btn-product text-capitaliz">Create</button>
</div>
}
<script type="text/javascript">
window.addEventListener("submit", function (e) {
debugger
if ($("#frmUploader").valid()) {
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)
);
}
}
OnSuccessI();
} else {
e.preventDefault();
}
},
true
);
</script>
本人是.net程序员,因为英语不行,使用工具翻译,希望对有需要的人有所帮助
如果本文质量不好,还请谅解,毕竟这些操作还是比较费时的,英语较好的可以看原文
