如何限制 Kendo UI Web Upload 只允许一次上传？答案

【问题标题】：How do I limit Kendo UI Web Upload To allow only a single upload?如何限制 Kendo UI Web Upload 只允许一次上传？
【发布时间】：2013-04-05 11:41:16
【问题描述】：

我目前正在使用 Kendo UI 将文件上传到使用 MVC3 和 Razor 和实体框架的数据库。我在我网站的几个区域都运行良好，除非我需要将其限制为仅允许单个上传。我将多个设置为false，我需要禁止多选，但仍然允许用户多次单击选择按钮来添加文件，这违反了数据库中该字段的要求。

我尝试了一些我认为在他们的网站上找到的建议，但它们指的是当前请求中发送的当前选定项目，而不是整个上传列表（见下图）。

<script type="text/javascript">
  function singleFile(e) {
    var files = e.files;
    if (e.files.length > 1) {
      alert('Only one file may be uploaded, cancelling operation...');
      e.preventDefault();
    }
  }
</script>

@(Html.Kendo().Upload()
  .Name("resumeAttachments")
  .Multiple(false)
  .Async(async => async
      .Save("ResumeSave", "File")
  )
  .Events(c => c
      .Upload("resumeOnUpload")
  )
  .Events(c => c
      .Success("resumeOnSuccess")
  )
  .Events(c => c
      .Complete("singleFile")
  )
)

【问题讨论】：

也许这在当时有所不同，但现在 (v2016.3.1028) 当使用 multiple: false 时，除了添加操作之外还会调用删除操作 - 控件会清理以前选择的文件。但是，如果您的要求是他们不能更改他们最初上传的文件，那么您接受的解决方案或非异步 + 非多重配置都可以。

标签： javascript c# asp.net-mvc kendo-ui kendo-asp.net-mvc

【解决方案1】：

在我得到防止多次上传的要求后，我偶然发现了这个页面。
如果正确完成，将“multiple”设置为 FALSE 就可以正常工作。

（虽然您可以使用 Kendo Razor 语法，但请注意，当您查看页面源代码时，.Kendo() 实际上已转换为 .kendoUpload

因此我更喜欢这种 javascript 中的语法（在 @using 之后）：

@using Kendo.Mvc.UI;

<script type="text/javascript">

$(document).ready(function() {
    $("#files").kendoUpload({"multiple":false,
        async: {
            saveUrl: '@Url.Action("Save", "Upload", new { typeOfUploadedFile= @Model.DocName.ToString(), @proposalNo = @Model.ProposalNo.ToString(),  area = ""})',
            removeUrl: '@Url.Action("Remove", "Upload")',
            autoUpload: true
        }
    });
});   

</script>

【讨论】：

此代码有效。谁决定开车经过并投反对票？谢谢！
实际上这不是 multiple: false 的工作原理。来自 kendo ui 网站：“此选项不限制异步配置中上传文件的总数。”
遗憾的是，我没有与 Kendo 环境签订合同来确认或拒绝您的回复（以帮助 stackoverflow 社区）。我只记得它工作并获得了对流程的 QA 批准，我目前无法验证任何一种方式。谢谢
我可以确认这是可行的。我认为让这个工作的关键是拥有removeUrl。该控件将使用它来删除任何以前选择的文件。
在async 设置之外设置multiple: false 并从根本上解决了我的问题。

【解决方案2】：

在周末（和一个长周末的假期放松一下）稍微思考之后，它击中了我......将singleFile函数更改为以下将禁用文件上传后的控件。

function singleFile(e) {
  var upload = $("#resumeAttachments").data("kendoUpload");

  // disables the upload after upload
  upload.disable();
}

【讨论】：

【解决方案3】：

你必须将剑道的multiple属性upload设置为false;
例如@(Html.Kendo().Upload().Multiple(false))

【讨论】：

【解决方案4】：

我知道这是一个非常古老的线程，但是我只想发布我们遇到的问题。通过异步上传添加多个将适用于以下简单代码

$("#files").kendoUpload({
                        multiple : false,
                        async : {
                                saveUrl : FileUploadURL,
                                removeUrl : FileRemoveURL,
                                autoUpload : true
                                },
                        remove : onRemove,
                        success : onSuccess
                        });

但是会有一个非常烦人的行为，当用户在之前选择的文件上传仍在进行中时选择另一个文件，然后从首页看起来之前选择的文件被删除，但事实是文件之前选择的文件的上传仍然会继续，这意味着文件将被上传到您的服务器，您没有机会触发 removeUrl 删除未使用的文件，当然会消耗额外的带宽。

到目前为止，我们为解决此问题所做的是在 onRemove 事件处理程序中添加一个小处理，它将调用 clearFileByUid 来停止上传。

function onRemove(e) {
        for(var removedFileId of getFileId(e)){
            //All in progress file should be stopped!
            var fileEntry=$('.k-file-progress[' + kendo.attr('uid') + '="' + removedFileId + '"]', this.wrapper)
            if(fileEntry!=null&&fileEntry.length>0){this.clearFileByUid(removedFileId);}
        }

}
function getFileId(e) {
        return $.map(e.files, function(file) {
                var fileId = file.uid;
                return fileId;
                });
}

【讨论】：

【解决方案5】：

另外，添加：

var dropzone = $(".k-dropzone").addClass("hide");

singleFile() 函数会在上传完成后隐藏选择按钮，给人一种无法再上传的真实印象，因为：

.hide {
  display: none; }

在你的css中定义。

【讨论】：