如何使用剑道文件上传按钮点击上传文件答案

【问题标题】：How to upload file on button click using kendo file upload如何使用剑道文件上传按钮点击上传文件
【发布时间】：2016-05-07 15:49:28
【问题描述】：

我有一个剑道上传和一个按钮，我想在点击按钮上传时使用剑道文件上传来上传文件。

当我调试我的操作方法 httppostefile 返回 null。

这是我的操作方法。

[HttpPost]
        public ActionResult UploadHactAssesmentAttachment(IEnumerable<HttpPostedFileBase> Files)
        {
            TBL_ASST_HACTA_ATTACHMENT obj = new TBL_ASST_HACTA_ATTACHMENT();

            foreach (var file in Files)
            {
                if (file.ContentLength > 0)
                {
                    var fileName = Path.GetFileName(file.FileName);
                    var path = Path.Combine(Server.MapPath("~/ProjectUploadedDocuments"), fileName);
                    obj.FilePath = path;
                    obj.CreatedDateTime = DateTime.Now;
                    obj.CreatedByID = Convert.ToInt32(Session["UserID"]);
                    dbcontext.TBL_ASST_HACTA_ATTACHMENT.Add(obj);
                    file.SaveAs(path);
                    dbcontext.SaveChanges();
                }
            }

            return RedirectToAction("Index");
        }

查看

@using (Ajax.BeginForm("UploadHactAssesmentAttachment", "Partner", null, new AjaxOptions
{
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "OnSuccessAttachment"
}))
{
<div class="row">
    <div class="col-lg-3">
        @Html.Label("key finding Add attachment:")
    </div>
    <div class="col-lg-3">
        @(Html.Kendo().Upload()
           .Name("Files")
        )

    </div>
</div>
    <div class="row">
        <div class="col-lg-3"></div>
        <div class="col-lg-3">

            @Html.Kendo().Button().Name("btnAddattachment").Content("Add").HtmlAttributes(new { style = "width: 20%" })
        </div>
    </div>

【问题讨论】：

您不能使用Ajax.BeginForm() 上传文件。如果要使用ajax，则需要使用FormData。参考this answer

标签： jquery asp.net-mvc kendo-ui

【解决方案1】：

要上传文件async，无需将@(Html.Kendo().Upload()) 包裹在form 中因为 Upload 使用 HTML5 File API (w3,wiki) ，所以剑道团队也为旧浏览器提供了备用。所以最简单的方法是：

 <div class="row">
    <div class="col-lg-3">
      @(Html.Kendo().Upload()
          .Name("files")
          .Async(a => a
              .Save("UploadHactAssesmentAttachment", "Upload")
              .Remove("Remove", "Upload")//You need to implement it too
              .AutoUpload(true)
          )
      )
    </div>
 </div>

我认为查看他们的docs 也会有所帮助。

希望它有所帮助。

【讨论】：