Question

我有这个非常简单的形式：

<form id="file-form" action="student-files.php?userId=<?php echo $userId ;?>" method="post" enctype="multipart/form-data">

<strong>Title:</strong><br />
<input type="text" name="title" id="title" value="">
<span id="invalid-title" class="errormsg"></span>
<br /><br />

<strong>File:</strong><br />
<input type="file" name="file1" id="file1" value="null">
<span id="invalid-file1" class="errormsg"></span>
<br /><br />

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>
<div id="status"></div>
<br /><br />

<input type="submit" name="submit" value="Add File">
</form>

我尝试同时使用validate和ajaxform，以便我可以拥有上传进度条。我在这里找到了几个相似但没有一个对我有用的答案。

如果我完全删除了验证呼叫，则进度条会更新并上传文件。如果我保持验证调用，则进度条不会更新，但文件会上传。

只是进度条的视觉部分无法正常工作，我无法为我的生活做好准备。

这是我的JS

<script type="text/javascript">

$(document).ready(function () {

    $('#file-form').validate({
        rules: {
            file1: {
                required: true,
                extension: "pdf",
            },
        },
        messages: {
            file1: "File must be PDF",
        },
        onkeyup: false,
        onfocusout: false,
        onclick: false,
        errorPlacement: function(error, element) {
        error.appendTo('#invalid-' + element.attr('id'));
    }
    });

    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');


    $('#file-form').ajaxForm({
        beforeSubmit: function () {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal)
            percent.html(percentVal);
            return $('#file-form').valid();
        },
        uploadProgress: function (event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        complete: function () {
            bar.width("100%");
            percent.html("100%");
            window.location.replace("student-files.php?userId=<?php echo $userId ;?>")
        }
    });
});

</script>

非常感谢任何帮助。

Answer 1

您只需将ajaxForm()函数放在jQuery Validate插件的submitHandler回调选项中。 As per the documentation，submitHandler是“在验证后通过Ajax提交表单的正确位置”。

更像这样......

$(document).ready(function () {

    $('#file-form').validate({
        rules: {
            file1: {
                required: true,
                extension: "pdf",
            },
        },
        messages: {
            file1: "File must be PDF",
        },
        onkeyup: false,
        onfocusout: false,
        onclick: false,
        errorPlacement: function(error, element) {
            error.appendTo('#invalid-' + element.attr('id'));
        },
        submitHandler: function(form) {
            $(form).ajaxForm({
                // your options
            });
            return false;
        }
    });

});

无法使用jquery验证来使用jquery ajaxform和进度条

1 个答案: