我正在使用 Kendo UI Core(免费版)并想将文件上传到 Web 服务器(通过 MVC Controller )。我知道付费 Kendo UI 版本的方法,但我想用它的免费版本来做。
如下图
Kendo UI 上传的 HTML
<div class="demo-section k-header">
<input name="files" id="files" type="file" />
</div>
Java 脚本
$("#files").kendoUpload({
async: {
saveUrl: "save",
removeUrl: "remove",
autoUpload: true
}
});
它添加了一个按钮,如下所示:
现在,一旦我选择了文件,我想通过 MVC Controller 将其上传到服务器。
我应该如何从这里调用 MVC Controller ?
干杯
最佳答案
对于 Kendo UI Core(根据您的问题调用 Controller 操作来上传文件):-
$("#files").kendoUpload({
async: {
saveUrl: "controllername/actionname", //OR// '@Url.Action("actionname", "controllername")'
removeUrl: "controllername/actionname", //OR// '@Url.Action("actionname", "controllername")'
autoUpload: true
}
});
例如,如果 Controller 和 Action 名称是 Upload
和 Save
用于保存和删除上传的文件 Controller 和 Action 名称是 Upload
和 Remove
然后:-
$("#files").kendoUpload({
async: {
saveUrl: "Upload/Save", //OR// '@Url.Action("Save", "Upload")'
removeUrl: "Upload/Remove", //OR// '@Url.Action("Remove", "Upload")'
autoUpload: true
}
});
Kendo 文件上传的小演示(用于 kendo ui web):-
查看:-
<form method="post" action='@Url.Action("Submit")' style="width:45%">
<div class="demo-section">
@(Html.Kendo().Upload()
.Name("files")
)
<p>
<input type="submit" value="Submit" class="k-button" />
</p>
</div>
</form>
Controller :-
public ActionResult Submit(IEnumerable<HttpPostedFileBase> files)
{
if (files != null)
{
TempData["UploadedFiles"] = GetFileInfo(files);
}
return RedirectToAction("Index");
}
private IEnumerable<string> GetFileInfo(IEnumerable<HttpPostedFileBase> files)
{
return
from a in files
where a != null
select string.Format("{0} ({1} bytes)", Path.GetFileName(a.FileName), a.ContentLength);
}
完整的文档在这里:- http://demos.telerik.com/aspnet-mvc/upload/index
对于异步文件上传:-
查看:-
<div style="width:45%">
<div class="demo-section">
@(Html.Kendo().Upload()
.Name("files")
.Async(a => a
.Save("Save", "Upload")
.Remove("Remove", "Upload")
.AutoUpload(true)
)
)
</div>
</div>
Controller :-
public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
{
// The Name of the Upload component is "files"
if (files != null)
{
foreach (var file in files)
{
// Some browsers send file names with full path.
// We are only interested in the file name.
var fileName = Path.GetFileName(file.FileName);
var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
// The files are not actually saved in this demo
// file.SaveAs(physicalPath);
}
}
// Return an empty string to signify success
return Content("");
}
public ActionResult Remove(string[] fileNames)
{
// The parameter of the Remove action must be called "fileNames"
if (fileNames != null)
{
foreach (var fullName in fileNames)
{
var fileName = Path.GetFileName(fullName);
var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
// TODO: Verify user permissions
if (System.IO.File.Exists(physicalPath))
{
// The files are not actually removed in this demo
// System.IO.File.Delete(physicalPath);
}
}
}
// Return an empty string to signify success
return Content("");
}
关于jquery - Kendo UI Core - 上传 - 如何调用 MVC Controller,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25303981/