HTML5文件上传控件accept属性兼容性问题：为什么csv文件无法被正确过滤？

html5 元素的 accept 属性兼容性问题详解

在使用HTML5 元素时，开发者经常利用 accept 属性来限制用户上传的文件类型。然而，实践中会发现 accept 属性对某些 MIME 类型（例如 CSV 文件）的兼容性存在问题。

本文将探讨一个常见的场景：开发者使用 accept=”application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv” 来限制用户只能选择 xls、xlsx 和 csv 文件。 奇怪的是，xls 和 xlsx 文件能够被正确过滤，但 csv 文件却不受限制。

这并非 accept 属性本身的缺陷，而是浏览器兼容性差异导致的。尽管 text/csv 是 CSV 文件的标准 MIME 类型，但并非所有浏览器都完美支持它在 元素的 accept 属性中生效。部分浏览器可能更依赖文件扩展名来判断文件类型。

为了解决这个问题，并确保 CSV 文件也能被正确过滤，建议在 accept 属性中同时指定 MIME 类型和文件扩展名：

立即学习“前端免费学习笔记（深入）”；

<input type="file" accept=".xls, .xlsx, .csv">

登录后复制