如果文件上传未在 dropzone js 中完成，则禁用提交按钮

Question

我有两个表单，我在其中上传两个不同的 files.I 我正在使用单个提交按钮来处理两个文件。在这里，我想在没有文件上传或只上传一个文件时禁用提交按钮

这是我的代码

  <html>
        <script>
       Dropzone.options.myDropzone  = {  
                Dropzone.autoDiscover = false;
                addRemoveLinks: true,
                autoProcessQueue: true,
                maxFiles: 1,
                queueLimit:1,
                accept: function(file, done) {
                  console.log("uploaded");
                  done();
                },
               };
       Dropzone.options.myDropzone1  = {  
                Dropzone.autoDiscover = false;
                addRemoveLinks: true,
                autoProcessQueue: true,
                maxFiles: 1,
                queueLimit:1,
                accept: function(file, done) {
                  console.log("uploaded");
                  done();
                },
               };
    </script>
    <body>
    <form action="{% url 'myapp:upload_dropzone1' %}" id="my-dropzone" class="dropzone" method="post" required enctype="multipart/form-data">
                                {% csrf_token %}
                                  <div class="fallback">
                                    <input name="file" type="file" />
                                  </div>
                              </form>

    <form action="{% url 'myapp:upload_dropzone2' %}" id="my-dropzone1" class="dropzone" method="post" required enctype="multipart/form-data">
                            {% csrf_token %}
                              <div class="fallback">
                                <input name="file" type="file" />
                              </div>
                          </form>
                             <button  type="submit" id="validate" >Submit</button>
    </body>
    </html>

Answer 1

测试

uploadMultiple: true

而不是使用两个单独的上传。

config-uploadMultiple

event-processingmultiple

Answer 2

试试这个：

<html>
        <script>
       var RemainingUploads = 2;
       function checkEndUploads(){
           if(!RemainingUploads)
               document.getElementById("submitButton").disabled = false;
           }
       }
       Dropzone.options.myDropzone  = {  
                Dropzone.autoDiscover = false;
                addRemoveLinks: true,
                autoProcessQueue: true,
                maxFiles: 1,
                queueLimit:1,
                accept: function(file, done) {
                  console.log("uploaded");
                  done();
                },
                success: function(){
                    RemainingUploads --;
                    checkEndUploads();
                }
               };
       Dropzone.options.myDropzone1  = {  
                Dropzone.autoDiscover = false;
                addRemoveLinks: true,
                autoProcessQueue: true,
                maxFiles: 1,
                queueLimit:1,
                accept: function(file, done) {
                  console.log("uploaded");
                  done();
                },
                success: function(){
                    RemainingUploads --;
                    checkEndUploads();
                }
               };
    </script>
    <body>
    <form action="{% url 'myapp:upload_dropzone1' %}" id="my-dropzone" class="dropzone" method="post" required enctype="multipart/form-data">
                                {% csrf_token %}
                                  <div class="fallback">
                                    <input name="file" type="file" />
                                  </div>
                              </form>

    <form action="{% url 'myapp:upload_dropzone2' %}" id="my-dropzone1" class="dropzone" method="post" required enctype="multipart/form-data">
                            {% csrf_token %}
                              <div class="fallback">
                                <input name="file" type="file" />
                              </div>
                          </form>
                             <button id="submitButton" type="submit" id="validate" disabled="disabled">Submit</button>
    </body>
    </html>

如果文件上传未在 dropzone js 中完成，则禁用提交按钮

Disabling submit button if the file upload is not completed in dropzone js

javascript

dropzone.js