支持指定上传文件类型

一、概述

很多网站需要支持文件上传功能，但是为了安全起见，我们需要限制上传文件的类型。可以通过 HTML 表单的 accept 属性来指定允许上传的文件类型。例如：

<input type="file" accept="image/*">

这样就只允许上传图片文件。

二、支持的文件类型

一般情况下，accept 属性可以指定 MIME 类型或扩展名，多个值之间用逗号隔开。例如：

<input type="file" accept=".jpg,.png,image/jpeg">

上面的例子指定了允许上传 JPG 和 PNG 格式的图片，以及 MIME 类型为 image/jpeg 的文件。

下面是一些常见的 MIME 类型和扩展名：

| MIME 类型 | 扩展名 | | --------------------------| --------------------| | application/pdf | .pdf | | application/msword | .doc, .docx | | application/vnd.ms-excel | .xls, .xlsx | | image/jpeg | .jpg, .jpeg | | image/png | .png | | image/gif | .gif | | audio/mpeg | .mp3 | | video/mp4 | .mp4 |

三、实现方式

在 HTML 表单中，只需要给 <input type="file"> 元素添加 accept 属性即可。

如果使用第三方库，例如 Dropzone，可以在配置项中指定允许上传的文件类型。

// Dropzone 配置项
var options = {
  acceptedFiles: '.jpg,.png,image/jpeg'
};

// 创建 Dropzone 实例
var myDropzone = new Dropzone("#my-dropzone", options);

四、兼容性

accept 属性在 HTML5 中引入，因此只有较新的浏览器支持。一般来说，主流浏览器都支持该属性。对于传统浏览器，可以通过 JavaScript 进行兼容处理。