0

我有这个来上传文件并获得进度条。我想将上传的文件限制为仅 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”。

我还在服务器端验证了扩展，但为了节省带宽，我想让它也是客户端

感谢您的帮助

4

2 回答 2

1

尝试规则

extension: "pdf"

别忘了打电话

<script src="jquery-validation/dist/additional-methods.min.js"></script>
于 2015-10-23T07:05:00.533 回答
0

您拼错beforeSubmit了beforeSendwhich is not a valid callback function/option for this plugin。

然后看看这个其他答案： https ://stackoverflow.com/a/15324504/594235

基本上，使用插件的回调beforeSubmit函数首先使用ajaxFormValidate 插件的.valid()方法以编程方式检查表单的有效性。

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

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

$(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);
        }
    });

});
于 2013-03-10T17:12:57.107 回答