使用Kendo上传控件实现ASP.NET Core的“批处理模式”

从Github下载源代码

最初，我将上载控件用于仅表单上的基本上载控件。而且，这正是它的意思。但是，我希望它以一种“批处理模式”工作。我的意思是仅将文件上传到浏览器本身，而不在用户上传文件时自动将文件发布回服务器。而且，当他们从上载的文件列表中删除文件时，我也不希望立即删除该文件。但是，事实证明这比我想象的要难得多。我遇到了22种情况：如果您使用了异步模式（这是在文件上载或文件删除时，当然会调用服务器端功能的模式），那么我可能会看到一个初始文件列表，因此在用户打开表单时，他们可以查看以前上传的文件，这很棒。但是，这与我想要的不完全一样，因为在异步模式下，当用户上载或删除文件时会添加或删除文件。因此，我不得不编写大量的自定义JavaScript，并从根本上欺骗了上传控件，使其认为它处于异步模式，但并没有立即上传文件，因此我设法使用以下代码：

注意.AutoUpload(false)声明。这导致Upload控件不触发服务器端的SaveAttachment()和RemoveAttachment()方法。但是，这带来了另一个问题，即您现在有2个自动生成的大按钮，这些按钮将允许用户稍后上载或删除当前文件。我不希望发生这种情况，因为我想提交整个表单以及包含用户上载文件的IFormFile对象。因此，我编写了一些自定义CSS来摆脱那些难看的按钮！

这摆脱了那些按钮！但是，现在，仍然需要编写大量的JavaScript，因为我希望先前加载的图像在表单最初加载时显示为缩略图。如果没有这些额外的代码（我将向您展示），初始文件列表仍将填充，但是不带缩略图会很不方便。因此，从本质上讲，这种想法是遍历添加到控件本身的files属性中的所有文件（使用JavaScript），检索图像并以缩略图形式显示，然后替换文件列表中的现有默认视图。loadImages()在document.ready上被调用：

您的视图模型将包含基本64 string的实际文件版本：

并且，文件可以是任何形式的byte[]或stream。您只需在视图模型中进行转换，即可轻松地在文件列表中显示它。因此，一旦有了文件的基本64版本，只需在默认的telerik <span>标记之前，在实际文件中添加一个<img>标记即可，现在有了缩略图：

现在，上传控件可以正确呈现，并且您具有不错的图像预览，对于这种情况，我认为这是最低要求。Telerik没有图像预览选项，因此不幸的是，这是使其工作的唯一方法。

现在，仍然存在创建逻辑来处理新文件上传并正确渲染文件列表中的图像预览的问题。这与上面的JavaScript代码基本相同，除了使用上载控件的onSelect事件将其触发。并且，我添加了一个Boolean标志来处理文件的删除，以便将其与表单提交时的视图模型一起传递回去。使用以下onRemove事件触发该函数：

然后，这将方便地传递给表单提交时的服务器端函数，您只需在服务器上创建自定义逻辑即可处理所有3种情况：

1. 用户没有执行任何操作，因此File属性为null，因此您无需执行任何操作。
2. 用户添加了一个文件，因此File属性包含上载的新文件。
3. 用户通过单击缩略图旁边的“x” 来删除文件，以便您检查PerformDelete标记，如果是true，则将其删除：

...

另外，请确保包括“虚拟”异步方法，否则，异步功能将无法正常工作，您会想知道为什么不这样做：

现在，我们的批处理模式上传控件已完成。它执行我想要的所有功能，包括：

1. 带有缩略图预览的初始文件列表
2. 使用用户上传的文件自动填充View模型
3. 批处理模式操作，仅在表单提交时进行文件添加和删除
4. 随着用户自动添加和删除文件而生成的新文件上传图像预览

虽然，除了将Kendo Upload控件拖放到窗体上之外，还需要花费额外的精力，但我确实可以找到所需的内容。我敢肯定这将是处理图像的标准要求，而不是基本的仅上传控件的精简功能。telerik网站上也有许多演示：https://demos.telerik.com/aspnet-core/upload/index，但是，它们在批处理模式功能方面都没有实现。我还在Github上包含了源代码，因此您可以在自己的项目中重复使用所有代码！