时间戳

首页 > 解决方案 > Dropzone js在提交时验证

javascript - Dropzone js在提交时验证

问题描述

我有一个表格，我在其中使用 dropzone.js 进行文件上传。现在我正在验证所有输入字段。但我无法在提交前验证文件。如果文件已上传，则提交应该可以工作。否则它应该会抛出一个错误，比如“请上传文件”。我怎样才能做到这一点？

HTML 代码：

 <form action="/action">
        <div class="form-row">
           <div class="form-group col-md-6">
              <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name" required>
           </div>
           <div class="form-group col-md-6">
              <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" required>
           </div>
        </div>
        <div class="form-row">
           <div class="form-group col-md-12">
             <textarea class="form-control" id="message" name="message" placeholder="Message"></textarea>
           </div>
        </div>
        <div class="form-row">
           <div id="resume" class="dropzone form-control"></div>
        </div>
        <input type="submit" class="btn btn-primary mt-10" id="item-submit" value="submit">
    </form>

Javascript：

<script type="text/javascript">

    $(document).ready(function () {

        $("div#resume").dropzone({ url: "/change-this-later" });
        var dropzone3;
        Dropzone.autoDiscover = false;
        dropzone3 = new Dropzone('#resume', {
                maxFiles: 1,
            });
        $('#item-submit').click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            if ($('form#resume').valid()) {};
        });
    });

</script>

标签： javascriptjquerybootstrap-4dropzone.js

解决方案

您可以添加一个回调事件，如果上传成功则调用该事件

//indicates file upload is complete and is successful
var uploaded = false;

$("div#resume").dropzone({
    url: "/change-this-later",
    success: function (file, response) {
            uploaded = true;
    }
});

//Check the value of 'uploaded' when validating rest of fields

推荐阅读