javascript 如何将 Kendo UI Web Upload 限制为仅允许一次上传？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15979935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I limit Kendo UI Web Upload To allow only a single upload?
提问by MattInSD73
I am currently using Kendo UI for uploading files to a DB Using MVC3 and Razor and Entity Framework. I have it working great in several areas of my site, except when I need to restrict it to allowing only a singular upload. I have multiple set to false, which I need to disallow multiple selections, but the user is still allowed to click the select button any number of times to add files, violating the requirements for this field in the DB.
我目前正在使用 Kendo UI 使用 MVC3 和 Razor 以及实体框架将文件上传到数据库。它在我网站的多个区域都运行良好，除非我需要将其限制为仅允许单个上传。我有多个设置为 false，我需要禁止多个选择，但仍然允许用户多次单击选择按钮来添加文件，这违反了数据库中此字段的要求。
I tried some suggestions I thought I found on their site, but they are referring to the current selected items sent in the current request, not the whole of the uploads list (see image below).
我尝试了一些我认为在他们的网站上找到的建议，但它们指的是当前请求中发送的当前选定项目，而不是整个上传列表（见下图）。
<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")
)
)
采纳答案by MattInSD73
After a little bit of thinking over the weekend (and a long weekend of vacation to relax), it hit me... Changing the singleFile function to the following will disable the control after the file is uploaded.
经过周末的一点思考（和一个长周末放松的假期），它击中了我......将singleFile函数更改为以下将在文件上传后禁用控制。
function singleFile(e) {
var upload = $("#resumeAttachments").data("kendoUpload");
// disables the upload after upload
upload.disable();
}
回答by Tom Stickel
After I was given the requirement to prevent multiple uploads I stumbled across this page.
"multiple" set to FALSE works just fine if it is done correctly.
在我被要求防止多次上传后，我偶然发现了这个页面。
如果正确完成，“multiple”设置为 FALSE 就可以正常工作。
(While you CANuse the Kendo Razor syntax, notice when you view the page source that the .Kendo() actually gets converted to .kendoUpload
（当你CAN当您查看网页的源文件，该.Kendo（）实际上被转换到.kendoUpload使用剑道剃刀语法，通知
Thus I prefer this syntax in javascript(after the @using):
因此，我更喜欢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>
回答by MattInSD73
Also, adding:
另外，补充：
var dropzone = $(".k-dropzone").addClass("hide");
to the singleFile() function will hide the select button after the upload is completed, giving the very real impression that you can no longer upload, given that:
到 singleFile() 函数将在上传完成后隐藏选择按钮，给人一种无法再上传的真实印象，因为：
.hide {
display: none; }
is defined in your css somewhere.
在您的 css 中的某处定义。
回答by Hossein Ebrahimi
You must multipleproperty of kendo uploadset value to false;
for example @(Html.Kendo().Upload().Multiple(false))
您必须multiple将剑道的属性upload设置为false;
例如 @(Html.Kendo().Upload().Multiple(false))
回答by user698188
I know this is a really old thread, however i just want to post the issues we have encounted as well. Adding Multiple with async upload would work with below simple code
我知道这是一个非常古老的线程，但是我只想发布我们遇到的问题。添加多个异步上传将使用以下简单代码
$("#files").kendoUpload({
multiple : false,
async : {
saveUrl : FileUploadURL,
removeUrl : FileRemoveURL,
autoUpload : true
},
remove : onRemove,
success : onSuccess
});
however there will be a really annoying behaviour that, when users select another file when the previous selected file uploading is still in progress, then from the front page it looks like the previous selected file is removed, but the fact is the file uploading of previous selected file will still continue, which means the file will get uploaded to your server anyway and you have no chance to trigger the removeUrl to delete the unused file, and of course consuming addtional bandwidth.
但是会有一个很烦人的行为，当用户在上一个选择的文件上传仍在进行中选择另一个文件时，从首页看起来前一个选择的文件被删除了，但实际上是前一个选择的文件上传选定的文件仍将继续，这意味着该文件无论如何都会上传到您的服务器，您没有机会触发 removeUrl 来删除未使用的文件，当然还会消耗额外的带宽。
what we have done so far to get around this issue is to add a small handling in the onRemove event handler, which will invoking the clearFileByUid to stop the uploading.
到目前为止，我们为解决此问题所做的工作是在 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;
});
}
