Проверка входного файла с помощью нокаута JS и файла API

Я новичок в knockout js и пытается написать специальную проверку для ввода файлов с клиентской стороны с использованием нокаут JS и API файлов. Основная цель состоит в том, чтобы проверить расширение файла и размер файла и очистить путь ввода файла, если произошла ошибка проверки.Проверка входного файла с помощью нокаута 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" />

источник

2015-09-13 vincentsty

жестким вы можете достичь с помощью простого 'изменения event' в Ко пути. попробуйте что-то подобное http://jsfiddle.net/LkqTU/26692/. дайте нам знать –

@supercool благодарит за отзыв. Но я пытаюсь использовать плагин knockout.validation (пользовательские правила проверки) для достижения этой проверки, в которой он многократно используется, и сообщение об ошибке анализируется в атрибуте ValidationMessage, а не просто в поле предупреждения. – vincentsty

ok У вас есть несколько типов ввода 'file'? на вашей странице, на которой вы пытаетесь применить валидацию на тех –

Вы можете попробовать сделать заказ 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 

    }); 
});

источник

2015-09-25 21:35:05 WiseGuy

Проверка входного файла с помощью нокаута JS и файла API

ответ

Смежные вопросы