异步模式下剑道UI上传小部件的自定义事件

Question

我在我的项目中使用剑道UI上传，文件以异步方式上传。有一个在javascript中配置的上传事件，在上传按钮点击时触发每个文件，因为"autoUpload: false"。是否有一种方法，我可以在实际上传事件之前触发另一个事件，我可以检查用户是否可以上传文件?(或任何自定义逻辑)例如，新事件应该只触发一次，如果逻辑返回true，则调用实际的上传调用(对于每个文件)，否则返回false并显示错误。

Answer 1

可以将自定义逻辑放在上传事件的处理程序中。如果您决定不应该继续上传，您可以使用e.p preventdefault()取消它。

这里有一个很好的简单例子:https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/events/upload该链接的示例代码如下:

<input type="file" name="files" id="photos" />
<script>
$("#photos").kendoUpload({
async: {
saveUrl: "http://my-app.localhost/save",
removeUrl: "http://my-app.localhost/remove"
},
upload: onUpload
});
function onUpload(e) {
// An array with information about the uploaded files
var files = e.files;
// Checks the extension of each file and aborts the upload if it is not .jpg
$.each(files, function () {
if (this.extension.toLowerCase() != ".jpg") {
alert("Only .jpg files can be uploaded")
e.preventDefault();
}
});
}
</script>

Answer 2

选择事件在上传之前只运行一次。因此，您可以将AutoUpload设置为false，并将预上传逻辑置于Select处理程序中，然后在代码完成时调用.upload()。

的例子:

@(Html.Kendo().Upload()
.Name("treefiles")
.Async(a => a
.SaveUrl("./Index?handler=Save")
.RemoveUrl("./Index?handler=Remove")
.AutoUpload(false)
)
.Directory(true)
.DirectoryDrop(true)
.Events(events => events
.Select("uploadSelect")
.Upload("uploadStart")
.Success("uploadSuccess")
.Complete("uploadComplete")

)

function uploadSelect(e) {
//do some stuff
//trigger the upload
let uploadControl = $("#treefiles").data("kendoUpload");
uploadControl.upload(); 
}

请注意"UploadStart">