在 Dropzone 中完成上传时启用按钮答案

【问题标题】：Enabled Button When Upload Done in Dropzone在 Dropzone 中完成上传时启用按钮
【发布时间】：2015-12-22 21:38:40
【问题描述】：

我使用dropzonejs 创建上传文件但我想要

“如果用户没有上传和上传文件在proggres 2形式“照片”和“文档”按钮提交仍然禁用“。

“如果用户已经以“照片”和“文档”两种形式完成上传，则此按钮提交更改为启用”

这是我的脚本

<html>
<head>   
    <link href="css/dropzone.css" type="text/css" rel="stylesheet" />
    <script src="js/dropzone.js"></script>
</head>

<body>
     <script>
        function submitform()
                        {
                            document.forms["form_upload"].submit();
                        }
     </script>
     <form action="send_data.php" id="mydata" name="mydata" method="POST" >
        Your Name   <input type="text" placeholder="Your Name" name="your_name">    
     </form>

        Your Photo  
    <form action="upload.php" method="POST" class="dropzone">
     <input name="folder" type="hidden" value="301">
     <input name="parameter" type="hidden" value="photo">
    </form>

        Your Documentation  
    <form action="upload.php" method="POST" class="dropzone">
     <input name="folder" type="hidden" value="301">
     <input name="parameter" type="hidden" value="documentation">
    </form>

    <center><button disabled="True"  onclick="javascript: submitform()" type="button">Submit</button></center>
</body>
</html>

这个源代码dropzone.js和dropzone.css

帮我谢谢:)

【问题讨论】：

我编辑了答案，现在你可以看到它在 runnable 中工作

标签： javascript jquery html css dropzone.js

【解决方案1】：

上传成功后，dropzone 会在 div 中添加上传元素的预览，类为 dz-success，您可以检查每个表单是否存在该元素，一种方法是使用 jQuery 函数：

function checkForm() {
  var valid = true;
  if ($.trim($('input[name=your_name]').val()) === '') {
    valid = false;
  }
  $('form.dropzone').each(function() {
    if ($(this).find('.dz-success').length === 0) {
      valid = false;
    }
  });
  if (valid) {
    $('button[disabled=True]').removeAttr('disabled');
  }
};

然后在 dropzone 表单的初始化上，您可以在调用该函数的成功事件上添加一个事件侦听器来检查 init 选项中的表单，当您手动初始化 dropzone 时，您需要将 auto discover 选项设置为 false。

initdocumentation:

是一个在 Dropzone 初始化时被调用的函数。你可以在这个函数内部设置事件监听器。

根据documentation，success 事件在以下情况下触发：

文件已成功上传。获取服务器响应为第二个论点。（此事件之前称为完成）

Dropzone.autoDiscover = false;
$(".dropzone").each( function(){
    $(this).dropzone({
        init: function() {
            this.on("success", function() { 
                checkForm();
            });
        }
    });
});

您也可以通过将其添加到完整选项来调用验证函数。

根据documentation：

上传成功或错误时调用 Complete。

Dropzone.autoDiscover = false;
$(".dropzone").each(function() {
  $(this).dropzone({
    complete: function(file) {
      if (file.status == "success") {
        checkForm();
      }
    }
  });
});

更多关于配置选项：http://www.dropzonejs.com/#configuration

你可以在 runnable 中看到它在这里工作：

http://code.runnable.com/VgWdDZgLJkUGaepA/dropzone-success-event-for-php

【讨论】：

我尝试这样 > pastebin.com/jx9wtDAp 得到错误 >> ReferenceError: $ is not defined $(".dropzone").each(function()
我尝试包含 jquery.js 这个源代码 > pastebin.com/FT1nbmdK 获取错误 > TypeError: $(...).find(...).length is not a function if($ (this).find('.dz-success').length() == 0){
@MuhamadRidwansyah 是的，我的错。长度不是一个函数是一个javascript方法我没有括号，我要更新答案。
还是不行:'(可以在localhost中测试，这个源码>dl.dropboxusercontent.com/u/93946653/dropzone.zip
@MuhamadRidwansyah 我看了一下代码，对我来说工作正常，你有什么问题？