Question

我在我的表单上使用jQuery Validate，并且有单独的jQuery File Upload小部件我想在表单中添加“文件上载”窗口小部件。它应该如下工作：

用户选择或删除多个文件
用户点击提交按钮
表单字段获得验证
如果验证通过，则上传文件并提交表单

我尝试了各种组合，但要么我能够进行验证工作，要么上传文件，而不是两者兼而有之。

编辑：这是我的代码： jQuery验证：

var validator =  $("#job_offer_reply").validate({
    rules: {
        description: "required"
     },
    submitHandler: function(form) {
        var sData = $(form).serialize();
        console.log(sData);
        $.ajax({
            url: Ajax.ajaxurl,
            async: false,
            type: 'POST',
            data: sData,
            success: function (data) {
                $('#file_upload').trigger('click');
    }
});

文件上传（简化）：

 $(function(){
        var ul = $('#upload ul');
        $('#drop a').click(function(){
            $(this).parent().find('input').click();
        });

        // Initialize the jQuery File Upload plugin
        $('#upload').fileupload({
            formData: {
                action: 'ja_upload_cv',
            },
            dropZone: $('#drop'),

            add: function (e, data) {

                // Upload the file once it is added to the queue
                $('#file_upload').click(function(e) {
                    e.preventDefault();
                    var jqXHR = data.submit();
                })

            },
            done:function(e, data){
                console.log(data);
                $('#file_upload2').trigger('click');
            },
            fail:function(e, data){
                // Something has gone wrong!
                data.context.addClass('error');
            }
        });
    });

我当前的HTML代码很糟糕，因为我无法弄清楚如何将所有内容放入一个表单中。理想情况下，它应该是这样的：

<form id="job_offer_reply" enctype="multipart/form-data">
    <textarea name="description" id="description" class="form-control" rows="3"></textarea>
    <input type="hidden" name="action" value="ja_job_offer_reply"/>

    <input type="file" class="cv_upload" name="upl" multiple/>

    <input type="submit" class="btn btn-primary" name="submit" value="Submit">                   
</form>

这是＆＃34;如何提交其他数据＆＃34;文档：https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data但是，我更愿意从jQuery Validate代码触发上传，因为我需要先在数据库中创建记录，然后再上传文件。

jQuery验证和jQuery文件上传

0 个答案: