jQuery验证扩展上传文件类型答案

【问题标题】：jQuery validation extension upload file typejQuery验证扩展上传文件类型
【发布时间】：2013-03-10 11:17:18
【问题描述】：

我有这个来上传文件并获得进度条。我想将上传的文件限制为仅 pdf，不幸的是它不适用于 JQuery 验证插件：

$(document).ready(function(){

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

$('#up-form').validate({
 rules: {
     uploadedfile: {
         required: true,
         accept: "application/pdf",
         },
     },
 messages: {
    uploadedfile: "File must be PDF",
    },
 highlight: function(element) {
     $(element).closest('.control-group').removeClass('success').addClass('error');
 },
 success: function(element) {
 element
     .addClass('valid')
     .closest('.control-group').removeClass('error').addClass('success');
 }
});


$('form').ajaxForm({
    beforeSend: function() {


        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
     bar.width("100%");
    percent.html("100%");
        status.html(xhr.responseText);
    }
}); 
})();

我该如何解决？对于我尝试上传的每个文件，我总是收到错误消息“文件必须是 PDF”。

我也在服务器端验证扩展，但为了节省带宽，我想把它也做成客户端

感谢您的帮助

【问题讨论】：

试试链接中的建议。它可能适用于您想要实现的目标。 stackoverflow.com/questions/651700/…
当我尝试上传除 pdf 之外的其他文件时，我使用了这个 $("#up-form").bind("submit", function() { var ext = $('#uploadedfile').val().split('.').pop().toLowerCase(); if($.inArray(ext, ['pdf']) == -1) { alert('invalid extension!'); } });，它向我显示了警报，但它上传了文件
您没有做任何事情来连接 2 个插件。两者的文档都有一起工作的例子。在不识别验证的情况下，表单插件将不管它提交
@charlietfl：我该怎么做？很抱歉问这个问题，但我从 javascript/jquery 开始
在他们的文档中查看这两个插件的示例...建议在验证插件中使用submitHandler 选项来调用表单插件

标签： jquery ajax file-upload jquery-validate

【解决方案1】：

尝试规则

extension: "pdf"

别忘了打电话

<script src="jquery-validation/dist/additional-methods.min.js"></script>

【讨论】：

【解决方案2】：

您将beforeSubmit 拼错为beforeSend，即not a valid callback function/option for this plugin。

然后查看另一个答案：https://stackoverflow.com/a/15324504/594235

基本上，使用beforeSubmit callback function of the ajaxForm plugin 首先使用Validate plugin's .valid() method 以编程方式检查表单的有效性。

我的回答假设您的 .validate() 和 .ajaxForm() 初始化代码在其他方面是正确的。

在下面ajaxForm() 的beforeSubmit 回调中添加了.valid()...

$(document).ready(function () {

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

    $('#up-form').validate({
        rules: {
            uploadedfile: {
                required: true,
                accept: "application/pdf",
            },
        },
        messages: {
            uploadedfile: "File must be PDF",
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.addClass('valid')
                .closest('.control-group').removeClass('error').addClass('success');
        }
    });


    $('#up-form').ajaxForm({
        beforeSubmit: function () {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal)
            percent.html(percentVal);
            return $('#up-form').valid(); // TRUE when form is valid, FALSE will cancel submit
        },
        uploadProgress: function (event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        complete: function (xhr) {
            bar.width("100%");
            percent.html("100%");
            status.html(xhr.responseText);
        }
    });

});

【讨论】：