如何在文件自动上传时禁用Dropzone.js中的提交表单

How to disable submit form in Dropzone.js while files are auto uploading

本文关键字：js Dropzone 表单 提交 文件 自动上传      更新时间：2023-09-26

我使用的dropzone.js对我来说很好。它可以自动上传文件，这很酷。。。。。现在我有一个问题，我想禁用提交表单按钮，直到它将所有文件上传到服务器。。。。

我用基本代码调用了Dropzone。。。。

jQuery(function () {
                            Dropzone.autoDiscover = false;
                            var myDropzoneOptions = {
                                maxFilesize: 15,
                                addRemoveLinks: true,
                                acceptedFiles: 'image/*, .pdf, .doc, .docx,.xls,.xlsx,.csv,.txt',
        //                                acceptedFiles:'image/* , text/pdf ,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation',
                                clickable: true,
                                url: "<?php bloginfo('siteurl') ?>/?my_upload_of_task_files2=1",
                            };
                            var myDropzone = new Dropzone('div#myDropzoneElement2', myDropzoneOptions);
                            myDropzone.on("sending", function (file, xhr, formData) {
                                formData.append("author", "<?php echo $cid; ?>"); // Will send the filesize along with the file as POST data.
                                formData.append("ID", "<?php echo $pid; ?>"); // Will send the filesize along with the file as POST data.
                            });

`

等将文件上传到服务器。。。。

和HTML 中的样本提交表单

 <form action="..">
  <input type="submit" value="download" />
</form>

您可以使用onsending和queuecomplete事件来切换表单提交按钮上禁用的属性。

例如：

myDropzone.on("sending", function (file, xhr, formData) {
    // Disable the submit button
    $(":submit").prop("disabled", true);
    formData.append("author", "<?php echo $cid; ?>"); // Will send the filesize along with the file as POST data.
    formData.append("ID", "<?php echo $pid; ?>"); // Will send the filesize along with the file as POST data.
});
myDropzone.on("queuecomplete", function ( ) {
    // Re-enable the submit button
    $(":submit").prop("disabled", false);
});

组合https://www.dropzonejs.com/#dropzone-方法并提交

$(form).submit(function () {
  if (youDropZone.getUploadingFiles().length != 0) {
    return false;
  }
  // if your file field is required additional check if .getAcceptedFiles() == 0
  // if (
  //   youDropZone.getUploadingFiles().length != 0 
  //   || youDropZone.getAcceptedFiles() == 0
  // ) {
  //   return false;
  // }
})
相关文章：