Question

我目前正在使用Kendo UI将文件上传到使用MVC3和Razor和Entity Framework的数据库。我在我的网站的几个区域工作得很好，除非我需要限制它只允许单一上传。我有多个设置为false，我需要禁止多个选择，但仍允许用户多次单击选择按钮添加文件，违反了DB中此字段的要求。

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

<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")
  )
)

File list - Allowed up upload multiple files, singularly

Answer 1

在我被要求阻止多次上传后，我偶然发现了这个页面如果正确完成，“multiple”设置为FALSE就可以了。

（当您 CAN 使用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>

Answer 2

经过周末的一点思考（以及度假放松的长周末），它击中了我......将singleFile函数更改为以下内容将在文件上传后禁用控件。

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

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

Answer 3

另外，添加：

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

到singleFile（）函数将在上传完成后隐藏选择按钮，给人以非常真实的印象，即您无法再上传，因为：

.hide {
  display: none; }

在你的css中定义。

Answer 4

您必须{kent multiple的{{1}}属性将值设置为upload;
例如false

Answer 5

我知道这是一个非常老的话题，但是我只想发布我们遇到的问题。通过异步上传添加多个内容可以使用以下简单代码

$("#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;
                });
}

如何限制Kendo UI Web上传仅允许一次上传？

5 个答案: