[英]How do I limit Kendo UI Web Upload To allow only a single upload?
我目前正在使用 Kendo UI 使用 MVC3 和 Razor 和实体框架将文件上传到数据库。 我让它在我网站的几个区域运行良好,除非我需要将它限制为只允许单个上传。 我将 multiple 设置为 false,我需要禁止多选,但仍然允许用户多次单击 select 按钮添加文件,这违反了数据库中此字段的要求。
我尝试了一些我认为在他们的网站上找到的建议,但他们指的是当前请求中发送的当前选定项目,而不是整个上传列表(见下图)。
<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")
)
)
在我被要求阻止多次上传后,我偶然发现了这个页面。
设置为FALSE的“multiple”如果正确完成就可以正常工作。
(虽然你可以使用剑道剃刀语法,注意当您查看.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>
经过一段时间的思考(以及度假放松的长周末),它击中了我......将singleFile函数更改为以下将在文件上传后禁用控件。
function singleFile(e) {
var upload = $("#resumeAttachments").data("kendoUpload");
// disables the upload after upload
upload.disable();
}
另外,添加:
var dropzone = $(".k-dropzone").addClass("hide");
单个文件()函数将在上传完成后隐藏选择按钮,给人以非常真实的印象,即您无法再上传,因为:
.hide {
display: none; }
在你的css某处定义。
您必须将kendo upload
设置值的multiple
属性设置为false
;
例如@(Html.Kendo().Upload().Multiple(false))
我知道这是一个非常古老的主题,但我只是想发布我们已经解决的问题。 使用异步上传添加多个将使用以下简单代码
$("#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;
});
}
通过在脚本文档就绪方法中设置多个 false 来限制。
$("#kendoSingleFileInput").kendoUpload({
multiple: false,
select: onSelect
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.