Question

我有这样的剑道上传控件：

@(Html.Kendo().Upload()
    .Name("attachments")
    .Async(a => a
        .Save("UploadAsync", "Intel")
        .Remove("RemoveAsync", "Intel")
        .AutoUpload(true)
    )
    .Events(e => e
        .Success("onSuccessfulUpload")
        .Remove("onRemoveFile")
    )
    .Validation(v => v.AllowedExtensions(exts))
)

在控制器中，其Save方法如下：

public ActionResult UploadAsync(IEnumerable<HttpPostedFileBase> attachments)
{
    string filename;
    // ... do things ...
    return Json(new { ImageName = filename }, "text/plain");
}

为变量filename分配值。

它在控制器中的Remove方法看起来非常相似：

public ActionResult RemoveAsync(string[] fileNames)
{
    string filename;
    // ... do things ...
    return Json(new { ImageName = filename }, "text/plain");
}

我确认两个控制器方法都被正确调用，并且在两种情况下都将变量filename 分配给。

上传按预期工作，Success事件也按预期工作。（该警报仅用于测试。）

function onSuccessfulUpload(e) {
    alert(e.response.ImageName);
}

删除文件时会出现问题。

当我进入移除活动时，e没有.response。它有e.files和e.sender，但没有回复。

function onRemoveFile(e) {
    alert(e.response);                    // undefined!
    alert(JSON.stringify(e.files));       // works, but does not have what I need
}

如何访问RemoveAsync方法返回的内容？

Answer 1

看起来remove事件不提供此类数据，因此我只看到解决此问题的解决方法。

您可以尝试将结果名称放到标题中，然后您应该能够读取结果：

// Controller
Response.AddHeader("ImageName", imageName); // before Json(...)

// View/JS
alert(e.headers['ImageName']);

我没有测试过，我发现remove事件没有真正读取异步响应的风险，这可以解释为什么response对象不可用。

在这种情况下，您可以尝试使用以下解决方法：不要在删除时调用任何Url（或使用一些没有任何主体的Action，只是一个简单的结果）并在事件回调中执行{{1}你自己。

RemoveAsync

它不漂亮，但它应该可以工作并提供你需要的结果。

Answer 2

经过一段时间的探索，我找到了答案。

关键在于事件的顺序。我的第一个假设是成功上传后调用了Success事件，并且在成功（？）删除后调用了Remove事件。

事件的实际顺序是：

js onUpload＆gt; Controller.UploadAsync（）＆gt; js onSuccess

js onRemoveFile＆gt; Controller.RemoveAsync＆gt; js onSuccess

我在javascript中创建了两个并行数组来表示在客户端e.files中上传的文件，其中包含每个文件的uid，以及服务器端控制器方法（重命名文件）创建的文件名。 / p>

var fileUids = [];
var fileSaveNames = [];

当我发现有一个e.operation指定哪个操作是成功的操作时，我将onSuccessfulUpload函数更改为此：

function onSuccess(e) {
    if (e.operation == "upload") {
        var filename = e.response.ImageName;
        var uid = e.files[0].uid;

        fileUids.push(uid);
        fileSaveNames.push(filename)
        // ...
    }
    else if (e.operation == "remove") {
        var uid = e.files[0].uid;
        var saveIdx = fileUids.indexOf(uid);

        fileSaveNames.splice(saveIdx, 1);
        fileUids.splice(saveIdx, 1);
        // ...
    }
}

然后我更新了removeFile函数，我现在知道在控制器中的方法之前将其称为。

function removeFile(e) { var uid = e.files[0].uid; var idx = fileUids.indexOf(uid); e.data = { fileToRemove: fileSaveNames[idx] }; }

e.data分配是因为this thread，其中包含以下信息：


解决方案：只需要它来定义上传功能   事件并修改“数据”有效负载。

添加上传JS功能，在我的情况下添加参数“codeID”。

$("#files").kendoUpload({ [...] upload: function (e) { e.data = { codeID: $("#id").val() }; } });

现在在控制器上添加参数，就是它。

[HttpPost] public ActionResult Save(IEnumerable<HttpPostedFileBase> files, Guid codeID) { }

我没有在上传事件中，而是在Remove事件中。

我选择了参数名fileToRemove，控制器中的新RemoveAsync方法是这样的：

public ActionResult RemoveAsync(string[] fileNames, string fileToRemove) { string returnName = ""; if (!string.IsNullOrWhiteSpace(fileToRemove)) { // ... do things ... } return Json(new { ImageName = returnName }, "text/plain"); }

Kendo上传控件删除事件无响应

2 个答案: