在剑道上传中按 id 删除文件

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

删除附件方法需要 ID。在使用空的现有文件创建期间，我有以下事件处理程序来更新文件，以便可以使用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 分配到上传控件的方法。

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

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

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

Answer 1

剑道上传控件目前不支持此类行为。然而，使用当前版本实现它的一种方法是使用某种分隔符，在 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>