1

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

谢谢,

4

2 回答 2

7

另一种选择是将 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

于 2012-08-24T14:16:32.917 回答
3

有趣的场景。目前有两种方法可以解决:

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

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

于 2012-03-08T09:57:46.300 回答