使用敲除JS和文件API進行輸入文件驗證

Question

我是敲除JS的新手，並嘗試使用敲除JS和文件API為來自客戶端的文件輸入編寫自定義驗證。 主要目的是驗證文件擴展名和文件大小，並在發生驗證錯誤時清除文件輸入路徑。

下面是使用純JavaScript完成的代碼。 欣賞是否有人可以伸出援手。

 function FileAPIViewModel() { var self = this; } ko.applyBindings(new FileAPIViewModel()); $('#i_file').change( function() { //check whether browser fully supports all File API if (window.File && window.FileReader && window.FileList && window.Blob) { //get the file size and file type from file input field var fsize = $('#i_file')[0].files[0].size; var ftype = $('#i_file')[0].files[0].type; if(fsize>10) { alert(fsize +" bites\\nToo big!"); $('#i_file').val(''); } switch(ftype) { case 'image/png': case 'image/gif': break; default: alert('Unsupported File!'); $('#i_file').val(''); } }else{ alert("Please upgrade your browser, because your current browser lacks some new features we need!"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script> <input type="file" input="" id="i_file" /> <input type="button" value="Submit" id="i_submit" /> 

Answer 1

您可以嘗試為此創建一個自定義jquery驗證器。

$.validator.addMethod("filesize", function (value, element, params) {

//20000000

var ext = value.substr(value.length - 4);

//If  there is no file
if (value === "") {
    return false;
}
//check extension
if (ext !== null) {
    if (ext !== ".pdf") {
        return false;
    }
}
//check file size
if(element.files[0] != null){
    if (element.files[0].size > 20000000) {
        return false;
    }
}   
return true;

}, 'Must Upload A Valid PDF Under 20MB');

然后將規則添加到您認為是i_file的輸入中

$('[id^="i_file"]').each(function () {

    $(this).rules('add', {

        filesize: true

    });
});