Javascript Dropzone.js与其他表单结合使用-html5需要验证_Javascript_Jquery_Html_File Upload_Dropzone.js

Javascript Dropzone.js与其他表单结合使用-html5需要验证

javascript jquery html file-upload

Javascript Dropzone.js与其他表单结合使用-html5需要验证,javascript,jquery,html,file-upload,dropzone.js,Javascript,Jquery,Html,File Upload,Dropzone.js,您好，我使用dropzone并将其与其他表单组合。问题是e.preventDefault（）。但是如果我没有e.preventDefault（）它将提交其他表单而不上载我的文件。我怎么办这是我的全部代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link re

您好，我使用dropzone并将其与其他表单组合。问题是

e.preventDefault（）required

）丢失的代码>。但是如果我没有e.preventDefault（）它将提交其他表单而不上载我的文件。我怎么办
这是我的全部代码
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="dropzone.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="dropzone.js"></script>
    <script>
        Dropzone.options.myDropzone= {
    url: 'upload.php',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 50,
    maxFiles: 50,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    success: function(file, response){
        window.location = "http://www.google.com";

    },
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("firstname", $("#firstname").val());
            formData.append("lastname", $("#lastname").val());
        });
    }
}
    </script>
</head>
<body>
    <form action="upload.php" enctype="multipart/form-data" method="POST">
    <input type="text" id ="firstname" name ="firstname" required/>
    <input type="text" id ="lastname" name ="lastname" required/>

    <div class="dropzone" id="myDropzone"></div>
    <button type="submit" id="submit-all"> upload </button>
    </form>
</body>
</html>


文件
Dropzone.options.myDropzone={
url:'upload.php'，
自动处理队列：false，
uploadMultiple:true，
并行上传：50，
最大文件数：50，
最大文件大小：1，
acceptedFiles:'image/*'，
addRemoveLinks：是的，
成功：函数（文件、响应）{
window.location=”http://www.google.com";
},
init:function（）{
dzClosure=this；//确保在下面的函数中理解“this”。
//要使Dropzone处理队列（而不是默认的表单行为），请执行以下操作：
document.getElementById（“全部提交”）.addEventListener（“单击”，函数（e）{
//确保表单没有实际发送。
e、 预防默认值（）；
e、 停止传播（）；
dzClosure.processQueue（）；
});
//将所有表单数据与文件一起发送：
this.on（“sendingmultiple”，函数（data、xhr、formData）{
formData.append（“firstname”，$（“#firstname”）.val（）；
formData.append（“lastname”，$（“#lastname”）.val（）；
});
}
}
上传
当您使用dropzone.processqueue（）提交表单时，dropzone不知道需要输入，我认为最简单的方法是在处理队列之前，使用javascript手动验证提交按钮的同一事件侦听器中的输入值
例如：
init: function() {
    dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

    document.getElementById("submit-all").addEventListener("click", function(e) {
        e.preventDefault();
        e.stopPropagation();

        var validFirstName = document.getElementById("firstname").checkValidity();
        var validLastName = document.getElementById("lastname").checkValidity();

        if (!validFirstName || !validLastName) {
            // Here you can handle the empty input case, color the inputs red or whatever
            return false;

        } else {
            dzClosure.processQueue();
        }
    });

}

当您使用dropzone.processqueue（）
提交表单时，dropzone不知道需要输入，我认为最简单的方法是在处理队列之前，使用javascript手动验证提交按钮的同一事件侦听器中的输入值
例如：
init: function() {
    dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

    document.getElementById("submit-all").addEventListener("click", function(e) {
        e.preventDefault();
        e.stopPropagation();

        var validFirstName = document.getElementById("firstname").checkValidity();
        var validLastName = document.getElementById("lastname").checkValidity();

        if (!validFirstName || !validLastName) {
            // Here you can handle the empty input case, color the inputs red or whatever
            return false;

        } else {
            dzClosure.processQueue();
        }
    });

}