验证剑道上传控制

Question

我有一个带有剑道上传控件的用户表单。在用户大声提交表单之前，我需要确保上传控制已经完成。上传文件只是一个可选选项。如果用户点击提交按钮，我想给他们一条消息，让他们知道上传控件仍在处理中。我正在考虑在提交按钮上使用e.preventDefault和一个变量来检查他们是否仍在上传文件。我可以在上传事件中将其设置为false，在完整事件中将其切换为true。

想看看其他人是否有其他想法？

https://dojo.telerik.com/uXOVuHuC

Answer 1

当用户开始上传文件或上传过程完成时，每个文件上传都会有一个uid(唯一ID(。因此，您可以在上传开始时将这些uid存储在一个数组中，并在上传完成时删除该uid。然后根据uid数组是否为空来控制用户是否可以提交表单。以下是示例：

创建一个数组变量，用于存储上传文件的uid

/* use to store file's uids which are uploading */
let uploadingList = [];

假设您想在不允许提交表单时禁用提交按钮

/* to update button status */
const syncButtonStatus = () => {
/* set allow to submit form if the list is empty */
const canSubmit = !uploadingList.length;
/* disable the button if not allowed to submit */
$('#submit-button').prop('disabled', !canSubmit);
};

创建一个函数，将uid添加到列表

/* add the uid to the list by uid value */
const addUid = (uid) => {
const index = uploadingList.indexOf(uid);
if (index == -1) {
uploadingList.push(uid);
}
};

当开始上传文件时，将uid添加到列表中并更新按钮状态

/* when start upload of each file */
const startUpload = (upload) => {
/* add the file uid to the list */
addUid(upload.files[0].uid);
/* update the button status */
syncButtonStatus();
};

创建一个函数从列表中删除uid

/* remove the uid from the list by uid value */
const removeUid = (uid) => {
const index = uploadingList.indexOf(uid);
if (index > -1) {
uploadingList.splice(index, 1);
}
};

上传过程完成后，从列表中删除uid并更新按钮状态

/* when an upload process was finished regardless of success or failed */
const finishUpload = (upload) => {
/* loop through each upload file */
upload.sender.getFiles().forEach((file) => {
/* remove their uids from the list */
removeUid(file.uid)
});
/* update the button status */
syncButtonStatus();
};

演示：

/* use to store file's uids which are uploading */
let uploadingList = [];
/* to update button status */
const syncButtonStatus = () => {
/* set allow to submit form if the list is empty */
const canSubmit = !uploadingList.length;
/* disable the button if not allowed to submit */
$('#submit-button').prop('disabled', !canSubmit);

/* THIS IS NOT PART OF THE FUNCTION! it just for demo to show how the list store the uid */
$('#list').html(uploadingList.reduce((html, uid) => `${html}<li>${uid}</li>`, ''));
};
/* add the uid to the list by uid value */
const addUid = (uid) => {
const index = uploadingList.indexOf(uid);
if (index == -1) {
uploadingList.push(uid);
}
};
/* when start upload of each file */
const startUpload = (upload) => {
/* add the file uid to the list */
addUid(upload.files[0].uid);
/* update the button status */
syncButtonStatus();
};
/* remove the uid from the list by uid value */
const removeUid = (uid) => {
const index = uploadingList.indexOf(uid);
if (index > -1) {
uploadingList.splice(index, 1);
}
};
/* when an upload process was finished regardless of success or failed */
const finishUpload = (upload) => {
/* loop through each upload file */
upload.sender.getFiles().forEach((file) => {
/* remove their uids from the list */
removeUid(file.uid)
});
/* update the button status */
syncButtonStatus();
};
$(document).ready(function() {
$("#photos").kendoUpload({
async: {
saveUrl: "https://jsonplaceholder.typicode.com/posts/1",
removeUrl: "https://jsonplaceholder.typicode.com/posts/1",
autoUpload: true
},
upload: startUpload,
complete: finishUpload,
});
});

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.default-ocean-blue.min.css">
<form>
<button type="button" id="submit-button">Submit</button>
<hr />
<b>Uploading file uid list:</b>
<ul id="list">
</ul>
<input type="file" name="files" id="photos" />
</form>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/kendo.all.min.js"></script>

Answer 2

我不能发表评论-没有足够的代表

这本身并不是一个问题

所以这也不是一个真正的答案

另一种选择可能是完全禁用提交按钮，直到上传了一些东西——假设必须上传一些

如果某些内容不必上传，但可以(即：可选(，则在上传时禁用提交按钮，然后重新启用

Answer 3

@Boomer是正确的，您可以在页面加载时禁用提交

$("input[type=submit]").prop('disabled', true);

然后使用kendoUpload事件相应地启用它，例如：

complete: onComplete,
upload: onUpload,
error: onError,
success: onSuccess
});
function onComplete(e) {
$("input[type=submit]").prop('disabled', false);
}
function onSuccess(e) {
$("input[type=submit]").prop('disabled', false);
}
function onUpload(e) {
$("input[type=submit]").prop('disabled', true);
}
function onError(e) {
$("input[type=submit]").prop('disabled', true);
}

我认为complete只有在所有活动上传完成时才会触发，所以你可以使用它，至于错误或成功，它只是说如果一个成功或失败，就会触发，所以假设一次只加载一个文件；但我想你会希望在这种情况下仍然启用提交按钮，这样用户就可以提交管理上传的文件。因此，如果你在页面加载时禁用提交，并在除错误之外的任何上传事件中启用它，那么无论在选择的文件中是否成功上传了哪些文件，用户仍然可以提交上传的内容，如果它们都失败了，那么由于你在错误方法中没有做任何事情，按钮仍然会被禁用，这有意义吗？