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

Question

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

"if users not upload and upload file in proggres in 2 form "照片”和"Documentation"按钮提交仍然禁用”。

"if users already done upload in 2 form "photo" 和 "Documentation" 此按钮将更改提交到 enabled"

这是我的脚本

<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 and dropzone.css

帮帮我谢谢:)

Answer 1

上传成功后，dropzone 在 div 和 class 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 .

init documentation:

is a function that gets called when Dropzone is initialized. You can setup event listeners inside this function.

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

The file has been uploaded successfully. Gets the server response as second argument. (This event was called finished previously)

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

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

根据 documentation:

Complete is called when the upload was either successful or erroneous.

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

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

Enabled Button When Upload Done in Dropzone

html

javascript

css

jquery

dropzone.js