Javascript 在Dropzone中完成上载时启用按钮_Javascript_Jquery_Html_Css_Dropzone.js

Javascript 在Dropzone中完成上载时启用按钮

javascript jquery html css

Javascript 在Dropzone中完成上载时启用按钮,javascript,jquery,html,css,dropzone.js,Javascript,Jquery,Html,Css,Dropzone.js,我使用创建上载文件但是我想要 “如果用户未在proggres中以“照片”和“文档”两种形式上传文件，则“提交”按钮仍处于禁用状态。” “如果用户已经以“照片”和“文档”两种形式完成上载，则此按钮将更改提交到启用的” 这是我的剧本 <html> <head> <link href="css/dropzone.css" type="text/css" rel="stylesheet" /> <script src="js/dropzo

我使用创建上载文件但是我想要

“如果用户未在proggres中以“照片”和“文档”两种形式上传文件，则“提交”按钮仍处于禁用状态。”

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

这是我的剧本

<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>


函数submitform（）
{
document.forms[“form_upload”].submit（）；
}
你的名字
你的照片
您的文档
提交

此源代码和

帮助我感谢：）

关于上载成功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时，您需要将自动发现选项设置为false

init

：

是初始化Dropzone时调用的函数。你可以在此函数内设置事件侦听器

根据以下情况，将触发

成功

事件：

文件已成功上载。获取服务器响应，如下所示第二个论点。（此事件以前被称为已完成）

您还可以通过将验证函数添加到complete选项来调用它

根据报告：

当上载成功或错误时调用Complete

有关配置选项的更多信息：

您可以在runnable中看到它正在工作：

我尝试这样做>获取错误>>引用错误：$未定义$（“.dropzone”）。每个（函数（）我尝试并包括jquery.js此源代码>获取错误>类型错误：$（…）.find（…）.length不是函数if（$（this）.find（'.dz success'）。length（）=0）{@MuhamadRidwansyah是的，我的错。长度不是一个函数是一个javascript方法，我没有括号，我要更新答案。仍然不起作用：'（您可以在localhost中测试，此源代码>@MuhamadRidwansyah我查看了代码，对我来说工作正常，您有什么问题？我编辑了答案，现在您可以看到它在runnable中工作

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

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