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
    }

});

它添加了一个按钮，如下所示： enter image description here

现在，一旦我选择了文件，我想通过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网站）： -

查看： -

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

Answer 2

我有一点“Duh”时刻，并意识到如果你不指定.SaveField属性，那么控件的名称必须与Controller上的参数相同。

使用SaveField的.cshtml页面上的代码：

Html.Kendo().Upload()
     .Multiple(false)
     .Name("controlName")
     .Async(a => a
         .Save("SavePhoto", "Upload")
         .AutoUpload(true)
         .SaveField("fileParameter")
     );

样本控制器：

public ActionResult SavePhoto(IFormFile fileParameter)

如果遗漏了SaveLoad：

Html.Kendo().Upload()
     .Multiple(false)
     .Name("uploadFiles")
     .Async(a => a
         .Save("SavePhoto", "Upload")
         .AutoUpload(true)             
     );

它无效。在这种情况下，控件的名称必须与控制器中的参数匹配：

public ActionResult SavePhoto(IFormFile uploadFiles)

Answer 3

设置包装以节省时间

@(Html.Kendo().Upload().HtmlAttributes(new { Style = "width:300px;" })
    .Name("upImport")
    .Messages(e => e.DropFilesHere("Drop files here").Select("Select file"))
    .Multiple(false)

    .Async(a => a
        .Save("UploadFile", "File")
        .Remove("RemoveFile", "File")
        .AutoUpload(true)
        .SaveField("files")
    )

    .Events(events => events
        .Error("onError")               
        .Success("onSuccess")
    )
)

在您的服务器mvc应用程序上，您可能拥有FileService.Upload File（）或类似内容。

public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> files)
{
    ServerFileModel model = new ServerFileModel();
    try
    {
        // The Name of the Upload component is "files" 
        if (files == null || files.Count() == 0)
            throw new ArgumentException("No files defined");
        HttpPostedFileBase file = files.ToArray()[0];

        if (file.ContentLength > 10485760)
            throw new ArgumentException("File cannot exceed 10MB");

        file.InputStream.Position = 0;
        Byte[] destination = new Byte[file.ContentLength];
        file.InputStream.Read(destination, 0, file.ContentLength);

        //IGNORE THIS
        ServerFileFormatEnum type = TempFileStorageController.GetFileFormatForExtension(Path.GetExtension(file.FileName));
        ServerFileDescriptor serverFile = TempFileStorageController.AddFile(destination, type);
        //IGNORE ABOVE

        model.FileIdentifier = serverFile.FileIdentifier;
        model.FileName = file.FileName;
        model.FileSize = file.ContentLength;
    }
    catch (Exception e)
    {
        model.UploadError = e.Message;
    }
    return Json(model, JsonRequestBehavior.AllowGet);
}

Answer 4

最后它起作用了：

它以下列方式工作。

   $("#files").kendoUpload({
        async: {
            saveUrl: '@Url.Action("Save", "Home")',
            removeUrl: '@Url.Action("Remove", "Home")',
            autoUpload: false
        }

    });

这就是我调用Kendo UI窗口控件的方式，它与上传

的工作方式相同

Save is Action（Function），Home是Controller类名

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

4 个答案:

查看： -

控制器： -

查看： -

控制器： -