我正在为 MVC 使用 Kendo UI 文件上传,它工作得很好。在我的编辑页面上,我想显示之前从“创建”页面上传的文件。为了视觉一致性,我想在我的编辑页面上重新使用上传小部件,以便用户可以使用“删除”功能,或者如果他们选择添加其他文件。上传小部件是否支持此功能?
谢谢!
最佳答案
所以,我意识到这是一个很老的问题,但我最近想出了如何可靠地做到这一点。虽然此处的另一个答案肯定会显示文件,但它并没有真正将其连接到任何事件(特别是“删除”事件)。此外,与其手动设置所有这些,我想我更愿意让 Kendo 做所有真正肮脏的工作。
请注意,这仅适用于您的文件上传未设置为自动同步的情况。如果您使用自动上传功能,您可以在此处的 Kendo 文档中找到示例:http://docs.kendoui.com/api/web/upload#configuration-files
所以无论如何,让我们假设我们有一个文件输入,我们已经制作了一个剑道上传:
<input id="files" name="files" type="file" multiple="multiple" />
$(document).ready(function () {
var $upload = $("#files");
var allowMultiple = Boolean($upload.attr("multiple"));
$upload.kendoUpload({
multiple: allowMultiple,
showFileList: true,
autoUpload: false
});
}
然后,我们只需要获取有关文件的信息到我们的 jQuery。我喜欢将它塞入隐藏字段中的 JSON 字符串中,但您可以随心所欲地进行。
这是一个使用 Mvc HtmlHelpers 和 Newtonsoft 的 JSON.NET 的示例(我不使用 Razor,但您应该了解总体思路):
if (Model.Attachments.Count > 0)
{
var files = Model.Attachments.Select(x => new { name = x.FileName, extension = x.FileExtension, size = x.Size });
var filesJson = JsonConvert.SerializeObject(files);
Html.Render(Html.Hidden("existing-files", filesJson));
}
请注意,那里的格式非常重要。我们正在匹配 Kendo 期望的 JavaScript 对象的结构:
{
relatedInput : sourceInput,
fileNames: [{ // <-- this is the collection we just built above
name: "example.txt",
extenstion: ".txt",
size: 1234
}]
}
所以,剩下要做的就是把它们放在一起。基本上,我们将重新创建
onSelect
来自 Kendo 内部的函数 syncUploadModule
:$(document).ready(function () {
// setup the kendo upload
var $upload = $("#files");
var allowMultiple = Boolean($upload.attr("multiple"));
var upload = $upload.kendoUpload({
multiple: allowMultiple,
showFileList: true,
autoUpload: false
}).getKendoUpload();
// initialize the files
if (upload) {
var filesJson = $("[name$='existing-files']").val();
if (filesJson) {
var files = JSON.parse(filesJson);
var name = $.map(files, function (item) {
return item.name;
}).join(", ");
var sourceInput = upload._module.element.find("input[type='file']").last();
upload._addInput(sourceInput.clone().val(""));
var file = upload._enqueueFile(name, {
relatedInput : sourceInput,
fileNames : files
});
upload._fileAction(file, "remove");
}
}
});
仅此而已!
关于kendo-ui - 如何使用以前上传的文件填充剑道上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13921058/