如何過濾文件kendo-ui上傳？

Question

我正在使用kendo-ui上傳，我想過濾文件（只允許選擇.jpg，.png），但我不知道在javascript中實現，請幫幫我！

1- .cshtml文件

<input name="files" id="files" type="file" />

2- JavaScript

$(document).ready(function () {
    $("#files").kendoUpload({
        multiple: false,

        async: {
            saveUrl: "Home/Save"
        }
    });
});

Answer 1

要過濾文件，請執行以下操作：

<input name="files" id="files" type="file" accept=".jpg,.png"/>

Answer 2

初始化kendo上傳小部件時指定“select”事件處理程序：

$(document).ready(function () {
    $("#files").kendoUpload({
        multiple: false,
        async: {
            saveUrl: "Home/Save"
        },
        select: onSelect,
    });
});

然后使用它來處理文件選擇事件：

        function onSelect(e) {
            var files = e.files
            var acceptedFiles = [".jpg", ".jpeg", ".png", ".gif"]
            var isAcceptedImageFormat = ($.inArray(files[0].extension, acceptedFiles)) != -1

            if (!isAcceptedImageFormat) {
                   e.preventDefault();
                   alert("Image must be jpeg, png or gif");
                }
        }

Answer 3

您必須使用OnSelect事件並限制您想要的計數。

http://docs.kendoui.c​​om/api/web/upload#select

http://demos.kendoui.c​​om/web/upload/events.html

function onSelect(e) {
    if (e.files.length > 1) {
        alert("Please select only 1 file.");
        e.preventDefault();
    }
}

Answer 4

在下面的輸入文件選項中添加驗證：

validation: {
 allowedExtensions: [".gif", ".jpg", ".png"]
}

如果您正在尋找更多信息，請查看此演示： https ： //demos.telerik.com/kendo-ui/upload/validation