Question

我已按照以下方式设置了剑道上传。

@(Html.Kendo().Upload().Name("files")
.Async(a => a
    .Save("UploadAttachments", "Mycontroller")
    .Remove("RemoveAttachments", "Mycontroller")
    .SaveField("files")
    .RemoveField("ids")
    .AutoUpload(true))
.Events(e => e
    .Success("onUploadSuccess")
    .Error("onUploadError"))
.Files(files =>
{
    foreach (var f in Model.Attachments)
    {
        files.Add().Name(f.FileName).Extension(Path.GetExtension(f.FileName));
    }
}))

UploadAttachments方法将文件保存在服务器文件中并在db中创建记录并返回以下模型

Id-long
FileName: fileName

RemoveAttachments方法需要ids。在使用空的现有文件创建期间，我有以下事件处理程序，它更新文件，以便我可以使用id。

删除

function onUploadSuccess(e) {
    if (e.operation == "upload") {
        e.files[0].data = e.response[0]; // hold the attachment detail
        e.files[0].name = e.response[0].Id; // change name with id so it can be passed to remove method
    }
}

但是对于现有文件，我无法想出更新文件或将Model.Attachements中的id分配给上传控件的方法。

我可以在init期间使用id设置名称，但这样我就无法正确显示文件名。

foreach (var f in Model.Attachments)
{
      files.Add().Name(f.Id.ToString).Extension(Path.GetExtension(f.FileName));
}

这将在UI中显示错误的文件名。

Answer 1

现在有一个更好的解决方案。 The docs是指发送到删除处理程序的可选“数据”对象。您可以使用它来传递Remove事件期间所需的任何其他参数。这是我如何实现它的示例。

在客户端：

<div>
    @Html.HiddenFor(m => m.AttachmentId)
    @(Html.Kendo().Upload()
        .Name("AttachmentUploader")
        .Async(async => async.Remove("Remove", "Attachments"))
        .Events(e => e
            .Remove("onRemove")
            .Success("onSuccess")))
</div>
<script>        
    function onRemove(e) {
        e.data = {
            id: document.getElementById('AttachmentId').value
        };
    }

    function onSuccess(e) {
        switch (e.operation) {
            case 'remove':
                document.getElementById('AttachmentId').value = null;

                break;
        }
    }
</script>

并在服务器端：

public ContentResult Remove(int id)
{
    // call service to delete attachment by id. 

    return Content("");
}

Answer 2

Kendo上传控件目前不支持此类行为。然而，使用当前版本实现它的一种方法是使用某种分隔符，在name属性之后添加id并覆盖控件中的内部_renderInitialFiles方法以正确检索名称和id。您还可以使用remove事件将id而不是名称发送到服务器。

<div >
    @(Html.Kendo().Upload()
        .Name("files")
        .Async(a => a
            .SaveField("files")
            .RemoveField("ids")
            .Save("Save", "Upload")
            .Remove("Remove", "Upload")
            .AutoUpload(true)
        )
        .Events(e=>e.Remove("fileRemove").Success("onUploadSuccess"))
        .Files(files =>
        {
                files.Add().Name("somename-someid").Extension(".txt");
        })
    )
</div>

<script>

    function assignGuidToFiles(files, unique) {
        var uid = kendo.guid();

        return $.map(files, function (file) {
            file.uid = unique ? kendo.guid() : uid;

            return file;
        });
    }

    kendo.ui.Upload.fn._renderInitialFiles = function (files) {
        var that = this;
        var idx = 0;
        files = assignGuidToFiles(files, true);

        for (idx = 0; idx < files.length; idx++) {
            var currentFile = files[idx];
            var delimiterIndex = currentFile.name.indexOf("-");
            currentFile.id = currentFile.name.substring(delimiterIndex + 1);
            currentFile.name = currentFile.name.substring(0, delimiterIndex);

            var fileEntry = that._enqueueFile(currentFile.name, { fileNames: [currentFile] });
            fileEntry.addClass("k-file-success").data("files", [files[idx]]);

            if (that._supportsRemove()) {
                that._fileAction(fileEntry, "remove");
            }
        }
    }

    function onUploadSuccess(e) {
        if (e.operation == "upload") {

        }
    }

    function fileRemove(e) {
        for (var i = 0; i < e.files.length; i++) {
            e.files[i].name = e.files[i].id;
        }
    }
</script>

在kendo upload

2 个答案: