在 MVC 中使用 Knockout 进行文件上传
Posted
技术标签:
【中文标题】在 MVC 中使用 Knockout 进行文件上传【英文标题】：FileUpload using Knockout in MVC 【发布时间】：2016-12-11 20:41:24 【问题描述】：我需要使用 Knockout js 上传所有类型的文件。我正在使用 MVC 4.0，我需要将文件单独保存在一个文件夹中。一旦我上传了文件，我需要在网格中显示它（文件名、创建日期和文件类型）。
这是我的观点，包括淘汰赛脚本。
var ViewModel = function ()
var self = this;
self.fileInput = ko.observable();
self.fileName = ko.observable();
var Data =
enter code here
file: self.fileInput,
FileName: self.fileName
;
self.save = function ()
//Ajax call to Insert the Employee
$.ajax(
type: "POST",
url: "/Home/FileUpload",
data: ko.toJSON(Data),
contentType: "application/json",
dataType: 'json',
//cache: false,
mimeType: "multipart/form-data",
//processData: false,
success: function ()
alert("successful");
,
error: function ()
alert("fail");
);
var vm = new ViewModel();
ko.applyBindings(vm);
<html>
<body>
<div>
<form method="post">
<span>File</span>
<input type="file" id="fileUpload" name="fileUpload" data-bind="file: data: fileInput, name: fileName" />
<input type="button" id="btnUpload" data-bind="click: save" value="Upload" formenctype="multipart/form-data" />
</form>
</div>
</body>
</html>
emphasized text
所以请帮帮我，因为我是淘汰赛的新手。
【问题讨论】：
您需要使用FormData 和正确的 ajax 选项来使用 ajax 上传文件。参考this answer
谢谢斯蒂芬-穆克
【参考方案1】：
首先您需要创建一个 FormData 对象，然后查找文件并将其附加到 FormData。
var data = new FormData();
var files = $("#yourfileID").get(0).files;
data.append("KeyName", files[0]);
现在要向您的控制器发送数据，请进行 ajax 调用。
var ajaxRequest = $.ajax(
type: "POST",
url: yourURL,
contentType: false,
processData: false,
data: data ,
success: function (data)
//your callback goes here
);
现在在你的控制器中你可以做这样的事情
public HttpResponseMessage AcgDocumentUpload()
if (HttpContext.Current.Request.Files.AllKeys.Any())
var httpPostedFile = HttpContext.Current.Request.Files["KeyName"];
附：你也可以让 XMLHttpRequest() 发送数据
【讨论】：
以上是关于在 MVC 中使用 Knockout 进行文件上传的主要内容，如果未能解决你的问题，请参考以下文章
我可以在主视图的 Knockout 视图模型中使用 MVC 局部视图中的模型吗？
将 Knockout.js 与最新的 jQuery 文件和 ASP.NET MVC 一起使用