在选择要上传的文件时验证选择

Validate on select while choosing files for upload

本文关键字：选择 文件 验证      更新时间：2023-09-26

我正在尝试验证文件类型一旦文件被选择用于上传

下面是我的html代码 
<label> <input type="file" id="image" name="upload[]" multiple="multiple" onclick="validateFileExtension()" />

验证码

function validateFileExtension() {
       var ext = $('#my-file-selector').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg', 'pdf']) == -1) {
    alert('invalid extension!');
}
}

但是它不会在选择文件后立即进行验证。只有在提交表单时，才会进行验证。我有另一个jquery提交验证。我需要验证选择。

onclick在选择文件后不触发。使用onchange可以。

function validateFileExtension(element) {
  var files = $(element)[0].files;
  for(var i = 0; i < files.length; i++) {
    var ext = files[i].name.split('.').pop().toLowerCase();
    if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg', 'pdf']) == -1) {
      console.log('invalid extension!', ext);
    } else {
      console.log('valid extension :)', ext);
    }
  }
}
function validateForm(form) {
  validateFileExtension(form.image);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="file" id="image" name="upload[]" multiple="multiple" onchange="validateFileExtension(this)" />
<br>
<input type="submit" onclick="validateForm(this.parentNode)" />
</form>

如果使用multiple属性，则需要使用onchange并循环遍历文件数组

function validateFileExtension(element) {
  var i;
  for (i = 0; i < element.files.length; i++) {
    // make sure in all browsers were just looking at the file name 
    var ext = element.files[i].name.split('.')[1].toLowerCase(); 
    if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg', 'pdf']) == -1) {
      element.value = ""; // clear the input field
      alert('invalid extension!'); // now alert user
    }
  }
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>File</label>
<input type="file" id="image" name="upload[]" multiple="multiple" onchange="validateFileExtension(this);" />

相关文章：