估算Kendo上传控制

Question

我有一个带有Kendo上传控件的用户表单。我需要确保在允许用户提交表格之前完成了上传控件。上传文件只是可选的。如果他们点击“提交”按钮，我想向用户发送一条消息，以使他们知道上传控件仍在处理。我正在考虑在“提交”按钮上使用

e.preventDefault

以及一个变量来检查它们是否仍在上传文件。我可以在上传事件中将其设置为false，然后在完整的事件中将其切换为True。 with以查看是否还有其他人有其他想法？

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添加到列表中并更新按钮status

/* 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并更新按钮status

/* 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();
};

demo：

/* 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

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

@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);
      }

Answer 3