JS简单验证上传文件类型的方法

下面是“JS简单验证上传文件类型的方法”的完整攻略：

标题：JS简单验证上传文件类型的方法

1. 准备工作

在HTML代码中，输入如下的文件上传输入框代码：

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="uploadFile">
  <button type="submit">上传</button>
</form>

同时需要在HTML代码中引入一个JavaScript文件：

<script src="myValidation.js"></script>

2. 编写JS代码

在myValidation.js文件中，编写如下的代码：

var fileInput = document.getElementById('uploadFile');

fileInput.addEventListener('change', function() {
  var file = fileInput.files[0];
  var fileType = file.type;
  var supportedTypes = ['image/jpeg', 'image/png', 'image/gif'];

  if(!supportedTypes.includes(fileType)) {
    alert("只允许上传jpeg、png和gif格式的图片文件！");
    fileInput.value = "";
  }
});

以上代码实现了以下操作：

• 获取文件上传输入框元素
• 给元素绑定change事件
• 在change事件的回调函数中，获取上传文件的类型
• 设置允许上传的文件类型为jpeg、png和gif
• 判断上传文件的类型是否在允许上传的文件类型之内，如果不是，弹出提示框，并清空上传文件输入框的值

3. 示例说明

假设我们需要限制只能上传jpeg、png和gif格式的图片文件，那么我们可以使用上述代码实现。

示例1：上传一个pdf格式的文件

如果上传一个pdf格式的文件，将会弹出提示框，提示“只允许上传jpeg、png和gif格式的图片文件！”。上传文件输入框的值将被清空，同时文件并不会通过表单提交。

示例2：上传一个gif格式的文件

如果上传一个gif格式的文件，不会弹出提示框，上传文件将会被通过表单提交。