[英]ASP MVC4 upload file without form but with partial view
Is it possible to upload a file using ASP.NET MVC4 with Razor without using forms (either BeginForm
or <form>
) in the view. 是否可以使用带有Razor的ASP.NET MVC4上传文件,而无需在视图中使用表单(
BeginForm
或<form>
)。
My problem is I have a partial view on the main view to show infomation (a log), if I use forms I can get the information about the file being uploaded either via the HttpPostFileBase
or Request.Files
, however my partial view refresh, refreshes the entire page and I end up only seeing the partial view. 我的问题是我在主视图上有部分视图来显示信息(日志),如果我使用表单我可以通过
HttpPostFileBase
或Request.Files
获取有关正在上传的文件的信息,但是我的部分视图刷新,刷新整个页面,我最终只看到局部视图。 If I don't use forms the partial view updates correctly, but I'm missing all information about the file. 如果我不使用表单部分视图正确更新,但我缺少有关该文件的所有信息。
I've tried preventDefault()
in the ajax (which updates the partial view). 我在ajax(更新局部视图)中尝试过
preventDefault()
)。 But I can't seem to get it to work. 但我似乎无法让它发挥作用。
Here is my code: 这是我的代码:
Controller: 控制器:
[HttpPost]
public PartialViewResult FileUpload(MyViewModel vm)
{
vm.Log = new ScriptLog();
if (Request.Files.Count < 1)
{
vm.Log.Add("File information missing");
}
else if (Request.Files[0].ContentLength < 1)
{
vm.Log.Add("File empty");
}
else
{
// Upload file and fill log
vm.Log.Add("File uploaded successfully.");
}
return PartialView("Log", vm.Log);
}
View: 视图:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
@model ViewModels.MyViewModel
<input type="file" name="file" accept="application/vnd.ms-excel" />
<input id="uploadButton" type="submit" value="Upload" />
@*
Without the form (BeginForm or <form>) the partial view correctly updates in place.
But it is missing any file information.
With it I can get the file information but I can't update the partial view in place.
*@
<div id="log">
@{ if (Model != null)
{
Html.RenderPartial("Log", Model.Log);
}
}
</div>
<script>
$("input[id=uploadButton]").on("click", function (e) {
//e.preventDefault(); // preventing the default action
//alert("Here")
$.post("/MyContoller/FileUpload")
.done(function (partialResult) {
$("#log").html(partialResult);
})
});
</script>
Ok, so here is the solution: 好的,这是解决方案:
$("input[id=uploadButton]").on("click", function (e) {
var fd = new FormData();
var input = document.querySelector("input");
//fd.append({name of you variable in ViewModel}, value)
fd.append('file', input.files[0]);
$.ajax({
url: '/MyContoller/FileUpload',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});
});
Here are some references: 以下是一些参考:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.