Kendo UI核心 - 上传 - 如何调用MVC控制器

Question

我正在使用Kendo UI Core(免费版),并希望将文件上传到Web Server(通过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控制器？

干杯

Answer 1

对于Kendo UI Core(根据您的问题调用控制器操作来上传文件): -

$("#files").kendoUpload({
async: {
    saveUrl: "controllername/actionname",    //OR// '@Url.Action("actionname", "controllername")'   
    removeUrl: "controllername/actionname",  //OR// '@Url.Action("actionname", "controllername")'
    autoUpload: true
  }
});

例如,如果控制器和操作名称是Upload和,Save对于保存和删除上传的文件,控制器和操作名称是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>

控制器: -

 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>

控制器: -

 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("");
        }