輸入文件驗證與淘汰賽的JS和文件API

我是新來淘汰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

艱難的，你可以用KO的方式簡單'變化event'實現。嘗試像這樣http://jsfiddle.net/LkqTU/26692/。讓我們知道 –

@supercool感謝您的反饋。但我試圖利用knockout.validation插件（自定義驗證規則）來實現此驗證，其中它是可重用的，並將錯誤消息解析爲ValidationMessage屬性，而不是簡單的警告框。 – vincentsty

好的，你有多個輸入類型'文件'控制？在你的頁面上，你嘗試對這些應用驗證 –

你可以嘗試做一個自定義的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');

然後添加規則，以你的輸入（S）我相信是i_file

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

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

     filesize: true 

    }); 
});

來源

2015-09-25 21:35:05 WiseGuy

輸入文件驗證與淘汰賽的JS和文件API

回答

相關問題