jQuery验证扩展上传文件类型

我有这个上传文件并获得进度条。我想限制上传的文件只PDF，遗憾的是它不使用jQuery验证插件工作与此：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”。

我还确认在服务器端的延伸，但节省带宽，我想使它也客户端

谢谢您的帮助

来源

2013-03-10 WilliamD.

尝试建议在链接。它可能适用于你想要实现的目标。 http://stackoverflow.com/questions/651700/how-to-have-jquery-restrict-file-types-on-upload – 2013-03-10 11:25:21

我用这个'$（“＃up-form”）。bind（“submit”，函数（）{ var ext = $（'＃uploadedfile'）.val（）.split（'。'）.pop（）。toLowerCase（）; if（$。inArray（ext，['pdf']） == -1）{ alert（'invalid extension！'）; } }）;'当我尝试上传除pdf之外的其他文件时，它显示警报但它上传文件 – 2013-03-10 11:34:01

你什么也没做连接2个插件。两个文档都有一起工作的例子。如果没有确认验证，表单插件将不管它提交 – charlietfl 2013-03-10 12:00:41

你拼错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()初始化代码是正确的。

新增.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-10 17:12:57 Sparky

规则中试

extension: "pdf"

不要忘记调用

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

来源

2015-10-23 07:05:00

jQuery验证扩展上传文件类型

回答

相关问题