如何限制特定扩展文件在 kendo 上传中上传。？使用 MVC 剃刀视图和 jQuery

Question

我们想在使用 mvc + kendo 在 razor 视图中使用“Kendo.upload”上传文件时限制如此多的扩展名。限制函数必须在 javascript 或 jquery.

中

when user try to upload file with .Exe extension then give the alert like file format is not allowed.

Answer 1

将此代码片段添加到您的 razor 视图中。确保您在项目中实施了基诺。

@(Html.Kendo().Upload().Events(e => e.Upload("onUpload"))
                                                .Name("Files")
                                                .Async(a => a.Save("CustomDropZoneSave", "controller")
                                                    .Remove("CustomDropZoneRemove", "controller")
                                                    .AutoUpload(true)
                                                    )
                                                .Events(x => x.Success("onCustomDropZoneFileSuccess").Remove("onCustomDropZoneFileRemove"))
                                                .ShowFileList(true)
                                                .Multiple(false)
                                        )

我们不允许更新的标准扩展，转到 js 文件，

const BlockedFileFomates = ["exe", "ade", "adp", "apk", "appx", "appxbundle", "bat", "cab", "chm", "cmd", "com", "cpl", "dll", "dmg", "ex", "ex_", "exe", "hta", "ins", "isp", "iso", "jar", "js", "jse", "lib", "lnk", "mde", "msc", "msi", "msix", "msixbundle", "msp", "mst", "nsh", "pif", "ps1", "scr", "sct", "shb", "sys", "vb", "vbe", "vbs", "vxd", "wsc", "wsf", "wsh"];

下面是JS函数，可以防止上传上面的扩展。,

    function onUpload(e) {
            var files = e.files;
            $.each(files, function () {
                if (BlockedFileFomates.includes(this.extension.toLowerCase().replace('.', ''))) {
                    
                         //we do have this function to show toast message. use your way to show alert message.
                         /*func_CreateToastrNotification('info', `Blocked for security reasons!. Blocked extentions : ${BlockedFileFomates.toString()}`, `File formate ${this.extension.toLowerCase()} is not allowed.`);*/
                      
                        alert(`File formate ${this.extension.toLowerCase()} is not allowed.`);
                        e.preventDefault();
                    }
                });
            }

解释:

1. 我们在加载 kendo“上传”时启动了“onUpload”事件。 重要的是 ".Events(e => e.Upload("onUpload")" 它会在我们尝试上传任何文件时执行。

2. BlockedFileFomates 是常量，它包含我们要限制的所有扩展名称。

3. js函数onUpload会阻止文件上传。