kendo ui上传错误在添加无效的文件类型时不发射

发布于 2025-01-25 11:20:10 字数 1639 浏览 3 评论 0原文

由于某种原因，当我添加无效文件扩展时，错误事件不会发生。我忽略了什么吗？

$(document).ready(() => {
  IniUploadJSONFile();
});

function IniUploadJSONFile() {
  $("#ImportJSONOrderFile").empty();
  $("#ImportJSONOrderFile").kendoUpload({
    async: {
      //saveUrl: ImportQuote,
      autoUpload: false,
      multiple: false
    },
    validation: {
      allowedExtensions: [".json"]
    },
    error: onError
  });
}

function onError(e) {
  var files = e.files;
  for (var i = 0; i < files.length; i++) {
    alert("Validation failed for " + files[i].name);

    var uid = files[i].uid;
    var entry = $(".k-file[data-uid='" + uid + "']");
    if (entry.length > 0) {
      entry.remove();
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.mobile.all.min.css">


<script src="https://kendo.cdn.telerik.com/2022.1.412/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>


<input id="ImportJSONOrderFile" type="file" />

原文

For some reason or another, when I add an invalid file extension the error event isn't happening. Did I overlook something?

$(document).ready(() => {
  IniUploadJSONFile();
});

function IniUploadJSONFile() {
  $("#ImportJSONOrderFile").empty();
  $("#ImportJSONOrderFile").kendoUpload({
    async: {
      //saveUrl: ImportQuote,
      autoUpload: false,
      multiple: false
    },
    validation: {
      allowedExtensions: [".json"]
    },
    error: onError
  });
}

function onError(e) {
  var files = e.files;
  for (var i = 0; i < files.length; i++) {
    alert("Validation failed for " + files[i].name);

    var uid = files[i].uid;
    var entry = $(".k-file[data-uid='" + uid + "']");
    if (entry.length > 0) {
      entry.remove();
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.mobile.all.min.css">


<script src="https://kendo.cdn.telerik.com/2022.1.412/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>


<input id="ImportJSONOrderFile" type="file" />

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

送你一个梦 2025-02-01 11:20:10

这是一个仅接受.json文件扩展名的示例。您可以在Telerik Dojo中运行它。

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/datetimepicker/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.mobile.all.min.css">

</head>
<body>
    <div id="example">
      <div class="demo-section k-content">
        <input id="ImportJSONOrderFile" type="file" />
      </div>
      
      <script>
        $(document).ready(() => {
                IniUploadJSONFile();
                });

        function IniUploadJSONFile() {
          $("#ImportJSONOrderFile").empty();
          $("#ImportJSONOrderFile").kendoUpload({
            async: {
              //saveUrl: ImportQuote,
              autoUpload: false,
              multiple: false
            },
            select: function(e) {
              $.each(e.files, function (index, value) {
                if (value.extension != ".json") {
                  alert("Invalid file type.");
                  e.preventDefault();
                }
                    });
            },
          });
        }
        </script>
            
    </div>
</body>
</html>

Here is an example that will only accept .json file extension. You can run it in the Telerik DOJO.

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/datetimepicker/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.mobile.all.min.css">

</head>
<body>
    <div id="example">
      <div class="demo-section k-content">
        <input id="ImportJSONOrderFile" type="file" />
      </div>
      
      <script>
        $(document).ready(() => {
                IniUploadJSONFile();
                });

        function IniUploadJSONFile() {
          $("#ImportJSONOrderFile").empty();
          $("#ImportJSONOrderFile").kendoUpload({
            async: {
              //saveUrl: ImportQuote,
              autoUpload: false,
              multiple: false
            },
            select: function(e) {
              $.each(e.files, function (index, value) {
                if (value.extension != ".json") {
                  alert("Invalid file type.");
                  e.preventDefault();
                }
                    });
            },
          });
        }
        </script>
            
    </div>
</body>
</html>

回复收藏 0 原文

~没有更多了~