javascript - 使用 Javascript 验证上传的文件扩展名

Question

我想在上传过程中验证文件扩展名，所以我尝试了以下方法:

HTML

<form name="userForm" ng-submit="submitForm()" novalidate>
    <input class="upload-file" data-max-size="7048" data-min-size="2048" type="file" name="filename" ng-model="userForm.file" validfile>
</form>

仅关注文件扩展名验证我尝试过:

JS

var extn = filename.split(".").pop();
var validFormats = ['mp3', 'wav'];
if validFormats.indexOf(extn) {
    ...
}

语法 if validFormats.indexOf(extn) 有什么问题？

Answer 1

只需获取值并将最后一个字符与数组值进行比较。如果在数组中找到，indexOf将返回index，如果没有，则返回-1。所以你必须将它与-1进行比较。当在数组中的第一个条目上找到时，索引为0，否则为false。

$(function() {
    var validFormats = ['mp3', 'wav'];
  
    $('.upload-file').change(function(e) {
        var extn = $(this).val().split(".").pop();

        if( validFormats.indexOf(extn) == -1 ) {
            $(this).val('');
            alert('please only use one of the following filetypes: ' + validFormats.join(', '));
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="userForm" ng-submit="submitForm()" novalidate>
  <input class="upload-file" data-max-size="7048" data-min-size="2048" type="file" name="filename" ng-model="userForm.file" validfile>
</form>