Question

我有两种形式，我要上传两个不同的文件，我使用一个提交按钮来处理这两个文件。在这里，我要在没有文件上传或只有一个文件上传时禁用提交按钮

这是我的代码

  <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中文件上传未完成，则禁用提交按钮

2 个答案: