Question

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

现在我再次关闭并打开模态窗口 - ＆gt;

现在我尝试上传文件 - ＆gt;

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

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

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

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

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

您需要重构代码，以便上传仅初始化一次，就像Window一样。或者，销毁并重新创建整个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
            }
        });

打开窗口＆amp;调用kendoUpload实例：

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

（感谢@dimodi！）

Answer 3

您应该禁用Drop Zone，它对我有用，请参阅Kendo Ticket上的以下链接：Disable Drop Zone

kendo.ui.Upload.fn._supportsDrop = function（）{return false; }

Before* After **

KendoUpload小部件重复问题

3 个答案: