网格弹出编辑器中的剑道上传：上传抛出异常时如何防止窗口关闭

Question

我不知道这是不是一个奇怪的案例，但是我在网上几乎找不到类似的情况。

我有一个剑道上传控件（异步上传多个文件），在剑道网格弹出编辑器模板中。

我正在尝试实现以下行为：

• 用户可以从上传控件中选择多个文件，但尚未上传。
• 当用户点击弹出窗口默认的“更新”按钮时，触发上传控件的异步上传动作。
• 如果用户点击“取消”按钮或关闭窗口，而没有点击“更新”，则窗口关闭，所选文件不会上传。
• 所有文件上传成功后，弹出窗口关闭并刷新网格。

上面的功能我已经实现了，没有任何问题（虽然我要拦截很多Kendo Control的javascript）。

我的问题如下：

• 如果总文件大小（在 DB + 待处理的）大于一定数量，那么作为服务器验证，我从服务器抛出异常，没有文件上传，并且 不应关闭弹出窗口，同时会在弹出窗口上显示错误消息。
• 如果用户到达上述点并选择其他文件，则之前选择的待处理文件将被清除，并且将像一个全新的循环一样运行。
• 如果用户到达上述位置并单击“取消”按钮或单击“X”图标，则应关闭窗口。

我找不到简单的方法来实现它。

我能找到与此相关的是Upload in Grid Popup editor。

但是，它仍然没有显示我如何在前端捕获自己的异常，阻止窗口关闭，并显示错误消息。

请提供任何建议！谢谢！

Answer 1

如何防止 onUpload 事件中的事件传播，并让您的窗口 OnClose 事件根据一些指示安全关闭的标志检查是否完全可以关闭。

@(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")
        .Upload("onUpload")
    )
)

<script type="text/javascript">

var _canPost=true;

function onUpload(e) {
    _canPost=true; 
    var files = e.files;
    $.each(files, function () {
        if (this.size / 1024 / 1024 > 5) {
            alert("Max 5Mb file size is allowed!");
            e.preventDefault();
            //Block window from closing flag here 
            _canPost=false;
        }
    });
}