无法使用 Ajax.BeginForm() 异步上传文件
Not able to upload file using Ajax.BeginForm() asynchronously
我正在尝试使用Ajax.BeginForm((上传文件,但它没有成功。
我的观点包含:
@using (Ajax.BeginForm("UploadFile", null, new AjaxOptions { HttpMethod="POST", UpdateTargetId = "result" }, new { enctype = "multipart/form-data" }))
{
<label id="lblUploadNewFile" for="fileUploadControl">Upload New File</label>
<input type="file" name="fileToUpload" id="fileUploadControl"/>
<input id="btnFileUpload" type="submit" value="Upload" />
<span id="result" />
}
对应的控制器为:
[HttpPost]
public string UploadFile(FormCollection formData)
{
HttpPostedFileBase file=null;
try
{
file = Request.Files[0];
}
catch { }
if ( file!=null && file.ContentLength > 0)
{
file.SaveAs(string.Concat(
AppDomain.CurrentDomain.BaseDirectory,
Path.GetFileName(file.FileName)));
return "Successfully Uploaded";
}
else
{
return "Upload Failed, please try again.";
}
}
问题是它正在上传文件,但在我删除jquery.unobtrusive-ajax.js
时不再执行任何异步发布。相反,它会执行完整的回发。
当我在视图中添加jquery.unobtrusive-ajax.js
时,它是异步执行的,但它不会在表单数据中发送上传文件。Request.Files[]
中没有文件发送到服务器。
不能使用 AJAX 上载文件。不支持此操作。如果你想这样做,你可以使用一些文件上传插件,如Uploadify
或Blueimp文件上传,或者使用HTML 5 File API
如果客户端浏览器支持它。
无需其他库即可执行此操作。
我遇到了这个小技巧,它很好地解决了它
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);
找到 http://www.acnenomor.com/1762557p1/c-mvc3-ajaxbeginform-to-upload-file-not-working
你可以这样做来获得这个工作: 从Nuget获取jQuery.Form库并将其导入到CSHTML文件中。您应该使用 @Html.BeginForm 创建表单。然后,在表单底部编写此脚本以 Ajax 化表单:
$(function(){
$('#formId').ajaxForm({
complete:function(xhr){...},
success:function(){...},
error: function(){...}
});
});
通过这些步骤,您可以将文件传递到控制器。
非常简单的解决方案:
@using (Ajax.BeginForm("action", "controller", new AjaxOptions
{
HttpMethod = "post",
InsertionMode = InsertionMode.Replace,
OnBegin = "startLoader",
OnSuccess = "Update_Record",
UpdateTargetId = "Succ_Msg"
},new { enctype = "multipart/form-data" }))
请注意新{ enctype = "multipart/form-data" }
这告诉 Razor 页面添加可以通过HttpPostedFileBase
的enctype
祝你好运:(。
相关文章:
- jar文件的后台进程,如何在进程结束时异步通知我
- 异步HTTP(ajax)请求在脚本标记中有效,但在js文件中无效
- 使用仪器从iOS自动化测试文件进行异步调用
- javascript文件的异步加载超时
- 异步上传多个文件,而不会相互踩踏
- cordova文件异步检查写入
- 为什么Chrome似乎异步请求Javascript文件
- 使用 jQuery File Upload + Carrierwave + Rails 4 启用异步文件上传
- HTML5异步文件上传,上传的流总是无效的
- 用于异步文件上传的PHP代码
- Node.js/Express异步文件上载
- 仅在IE 9和10中进行异步文件上载
- 在Node.js中,异步文件IO方法是如何为本地文件工作的?
- NodeJS如何处理异步文件IO
- 对于node.js中的本地文件,我应该使用异步文件IO方法而不是同步方法吗?
- 使用mootools进行异步文件上传
- 读取异步文件时EMFILE错误
- Javascript for循环异步文件执行
- Node.js异步文件I/O
- 节点.js模块单元测试 - 使用 sinon.js 存根异步文件系统调用