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传递给服务器以删除文件。

谢谢，小号

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

有趣的场景。现在有两种方法可以解决这个问题：

成功时，找到代表fileEntry的li元素并获取它的fileNames data- *属性。将检索到的name对象的fileNames属性设置为从服务器返回的guid值。这实质上更新了Kendo Upload控件的删除功能所使用的文件名。（如果你能够掌握原始资源，请查找方法removeUploadedFile和_submitRemove，所有这些都会很有意义）
成功时，清洁（某种程度上）选项是找到新添加的li元素（fileEntry），然后关联“删除”按钮（类：k-upload-action）。一旦你有了删除按钮，你就可以连接一个点击事件，通过它来调用你自己的自定义URL或上传控件的removeUrl，并传递你在上传成功时检索到的文件guid。

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

2 个答案: