使用敲除JS和文件API进行输入文件验证

Question

I am new to knockout js and trying to write custom validation for file input from client side using knockout JS and file API. The main aim is to validate the file extension and file size, and clear the file input path should validation error occur.

Below is the code being done using pure javascript. Appreciate if someone could lend a hand.

 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

You could try making a custom jquery validator for this.

$.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');

Then add rule to your input(s) which I believe is i_file

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

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

        filesize: true

    });
});