kendo ui文件上传插件移除按钮自定义

Question

我是 kendo ui 的新手，我在我的 asp.net mvc 应用程序中使用文件上传插件。一切都像梦一样工作。但我还有一个额外的要求。当我上传文件时，我为图像文件分配了一个唯一的图像 guid 并上传然后返回到回调函数。这是我的代码。

<script type="text/javascript">
    $(document).ready(function () {
        $("#attachments").kendoUpload({
            async: {
                saveUrl: '@Url.Action("UploadBlogImages", "Blog")',
                removeUrl: '@Url.Action("Remove", "Blog")',
                autoUpload: true
            },
            success: function (data) {
                var imageGuids = data.response;
                $.each(imageGuids, function (index, imageGuid) {
                    $('#form_uploadPic').append('<input type="hidden" value=' + imageGuid + 'name="ImgGuid">');
                });
            }
        });
    });
</script>

当用户单击删除按钮时，我需要删除文件，但我的问题是， 默认情况下，删除按钮将文件名（在上传时使用）作为要删除的文件名传递。但我是 在上传到服务器之前重命名文件。我正在为文件分配唯一的 guid。我已将该 guid 返回到成功函数。如何配置以便删除按钮将该 guid 传递给服务器以删除文件。

谢谢， S

Answer 1

另一种选择是将 id 添加到文件对象本身，因此在 onSuccess 处理程序中添加：

function onUploadSuccess(e) {
    //add the id returned in the json from the upload server script
    e.files[0].id=e.response.id;
}

然后在删除处理程序中将名称更改为 id：

function onUploadRemove(e) {
    var files = e.files;
    for(i=0;i <files.length;i++){
            //replace the name with the id added to the object
        files[i].name=files[i].id;
    }
}

这样设置：

$("input[type='file']").kendoUpload(
    {
        async: {
            saveUrl: "url",
            removeUrl: "url",
            removeField: "files"
       },
        success: onUploadSuccess,
        remove: onUploadRemove
    }
);

适用于最新的 kendoUI

Answer 2

有趣的场景。目前有两种方法：

1. 成功后，找到代表 fileEntry 的 li 元素并获取它的 fileNamesdata-* 属性。将检索到的 fileNames 对象的 name 属性设置为您从服务器返回的 guid 值。这实质上更新了 Kendo Upload 控件的删除功能使用的文件名。 （如果你能拿到原始源代码，寻找方法 removeUploadedFile 和 _submitRemove，所有这些都会很有意义）

2. 清洁器（有点）选项是在成功时找到新添加的 li 元素（fileEntry），然后与它关联的“删除”按钮（类：k-upload-action）。一旦你有了删除按钮，你就可以连接一个点击事件，通过它调用你自己的自定义 url 或上传控件的 removeUrl，将你在上传成功时检索到的文件 guid 传递给它。