javascript - 验证剑道上传控件

Question

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

Wanted to see if anyone else had any other ideas?

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>