Question

我有一个表单，其中我使用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>

Answer 1

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

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

Answer 2

所以我来解决这个问题。由于我将所有图像和字段都提交到同一按钮中，因此我只是加入了dropzone旁边的文件数组，并验证它的长度不为0。$ animalImage是我的dropzone。

var validateImages = function (animal) {
    if ($animalImage.files.length == 0) {
        swal({
            title: 'Advertencia',
            type: 'info',
            html: "Debe de guardar al menos una imágen",
            showCloseButton: true,
            focusConfirm: false
        });
        return false;
    }
    return animal;
};

希望这会有所帮助，请注意提交槽ajax，所以我只是使用dropzone来获得用户体验。

Dropzone JS在提交时进行验证

2 个答案: