Jquery 在MVC中使用Knockout进行文件上传
我需要上传所有类型的文件使用淘汰js。我正在使用MVC4.0,我需要将文件单独保存在一个文件夹中。一旦我上传了文件,我需要在网格中显示它(文件名、创建日期和文件类型) 这是我的观点,包括淘汰脚本Jquery 在MVC中使用Knockout进行文件上传,jquery,asp.net-mvc-4,file-upload,knockout.js,Jquery,Asp.net Mvc 4,File Upload,Knockout.js,我需要上传所有类型的文件使用淘汰js。我正在使用MVC4.0,我需要将文件单独保存在一个文件夹中。一旦我上传了文件,我需要在网格中显示它(文件名、创建日期和文件类型) 这是我的观点,包括淘汰脚本 var ViewModel = function () { var self = this; self.fileInput = ko.observable(); self.fileName = ko.observable(); var Data = { enter co
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>
var ViewModel=函数(){
var self=这个;
self.fileInput=ko.observable();
self.fileName=ko.observable();
风险值数据={
在这里输入代码
文件:self.fileInput,
文件名:self.FileName
};
self.save=函数(){
//Ajax调用以插入雇员
$.ajax({
类型:“POST”,
url:“/Home/FileUpload”,
数据:ko.toJSON(数据),
contentType:“应用程序/json”,
数据类型:“json”,
//cache:false,
mimeType:“多部分/表单数据”,
//processData:false,
成功:函数(){
警报(“成功”);
},
错误:函数(){
警报(“失败”);
}
});
}
}
var vm=new ViewModel();
ko.应用绑定(vm);
文件
强调文本
因为我是新手,所以请帮助我。首先,您需要创建一个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()发送数据您需要使用
FormData
和正确的ajax选项来使用ajax上传文件。谢谢斯蒂芬·穆克