在 kendo 上传中按 id 删除文件

Question

我已经设置 kendo 上传如下。

@(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 方法将文件保存在服务器文件中，并在数据库中创建一条记录，returns 以下模型

Id-long
FileName: fileName

RemoveAttachments 方法需要 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

Kendo 上传控件目前不支持此类行为。然而，使用当前版本实现它的一种方法是使用某种定界符，在名称属性后添加 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 上传中按 id 删除文件

Delete files by id in kendo upload

javascript

asp.net-mvc

upload

kendo-ui

kendo-upload