Question

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

“如果用户没有上传和上传文件，请用2照片”照片“和”文档“按钮继续提交禁用”。

“如果用户已经完成了以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

帮助我谢谢：）

Answer 1

在上传成功时，dropzone会在类dz-success的div中添加已上传元素的预览，如果存在该元素，则可以检查每个表单，单向可以使用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。 / p>

init documentation：

是初始化Dropzone时调用的函数。您可以在这个函数中设置事件监听器。

根据documentation，success事件在以下时间触发：

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

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

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

根据documentation：

当上传成功或错误时调用完成。

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中完成上传后启用按钮

1 个答案: