KendoUpload 小部件重复问题答案

【问题标题】：KendoUpload widget duplicate issueKendoUpload 小部件重复问题
【发布时间】：2016-08-18 15:20:41
【问题描述】：

我在模态窗口问题中有一个 kendoUpload 小部件 - 如果您关闭窗口然后再次打开它 kendoUpload 小部件，就好像它的某些部分创建了几个实例一样。因此，它会在您打开和关闭窗口时创建尽可能多的记录和上传。什么可能导致问题。每次关闭窗口但没有运气时，我都尝试销毁 kendoUpload 小部件。也许是因为语法错误......有什么想法吗？谢了！

现在我再次关闭并打开模态窗口 ->

现在我尝试上传文件 ->

HTML：

<div id="UploadFiles" style="display: none">
<h3>Upload your files:</h3>
<div class="demo-section k-content">
    <input name="files" id="files" type="file"/>
</div>
<br/>
<h3>Current files on server:</h3>
<div id="CurrentFilesOnServer">
    <ul class="CurrentFilesOnServerList">

    </ul>
</div>

模态窗口：

// Modal Window Upload file to server
    var uploadFilesWindow = $("#UploadFiles").kendoWindow({
        width: "350px",
        modal: true,
        title: "Upload file to server:",
        actions: [
            "Pin",
            "Minimize",
            "Maximize",
            "Close"
        ],
        close: function () {

        }
    }).data("kendoWindow");

JS 上传部分：

  // upload file on server
    $(".k-grid-upload")
        .click(function () {
           uploadFilesWindow.center().open();

            function upload () {

       $("#files")
              .kendoUpload({
                  async: {
                      saveUrl: "/api/Grid/UploadFileOnServer",
                      removeUrl: "",
                      autoUpload: true
                  }
            }
      });
});

C# 控制器：

// Upload file on server

    public string UploadFileOnServer()
    {

        var file = HttpContext.Current.Request.Files.Count > 0 ?
   HttpContext.Current.Request.Files[0] : null;

        if (file != null && file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);

            var path = Path.Combine(
                HttpContext.Current.Server.MapPath("~/uploads"),
                fileName
            );

            file.SaveAs(path);
        }

       return  file != null ? "/uploads/" + file.FileName : null;


    }

【问题讨论】：

标签： c# jquery asp.net-mvc kendo-ui kendo-upload

【解决方案1】：

可以肯定的是，初始化 Upload 小部件的代码被执行了多次，导致重复初始化和观察到的问题。

http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization

销毁 Kendo UI 小部件不会从 DOM 中删除生成的 HTML 标记（唯一的例外是 Window），因此销毁 Upload 将无济于事。

http://docs.telerik.com/kendo-ui/intro/widget-basics/destroy

您需要重构代码，使 Upload 只初始化一次，就像 Window 一样。或者，销毁并重新创建整个 Window，但请记住，它的 DOM 将被删除，您需要将其添加回来。

http://docs.telerik.com/kendo-ui/controls/layout/window/overview#configuration-Destroy

【讨论】：

【解决方案2】：

像这样更改了代码，现在它可以正常工作了：

初始化 kendoUpload：

 var kup = $("#files")
        .kendoUpload({
            async: {
                saveUrl: "/api/Grid/UploadFileOnServer",
                removeUrl: "",
                autoUpload: true
            }
        });

打开窗口并调用 kendoUpload 实例：

    $(".k-grid-upload")
        .click(function () {
           uploadFilesWindow.center().open();
           kup();
        });

（感谢@dimodi！）

【讨论】：

【解决方案3】：

您应该禁用放置区，它对我有用，请参阅 Kendo Ticket 中的此链接：Disable Drop Zone

kendo.ui.Upload.fn._supportsDrop = function() { return false; }

Before* After **

【讨论】：