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驗證擴展上傳文件類型

回答

相關問題