KendoUpload 小部件重复问题

Question

我在模式窗口中遇到了 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;


    }

Answer 1

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

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

销毁 Kendo UI 小部件不会从 DOM 中删除生成的 HTML 标记（唯一的例外是窗口），因此销毁上传不会有帮助。

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

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

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

Answer 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！）

Answer 3

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

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

Answer 4

我在 kendo UI Jquery 中遇到了同样的问题。 我用下面的代码在 Kendo UI Jquery 中解决了这个问题。请注意，我的kendoUpload是写在init()方法中的。这里我们仅在 kendoUpload 不存在的情况下进行初始化。

function init() {
    // Check if the Kendo Upload is already initialized
    if (!$("#upload").data("kendoUpload")) {
        // Initialize Kendo Upload
        $("#upload").kendoUpload({
            // your Kendo Upload configuration options
        });
    }
}