HTML Input="file" 接受属性文件类型 (CSV)

Question

我的页面上有一个文件上传对象：

 <input type="file" ID="fileSelect" />

在我的桌面上有以下 excel 文件：

1. 文件1.xlsx
2. 文件1.xls
3. 文件.csv

我希望文件上传 仅 显示 .xlsx , .xls , & .csv 文件。

使用 accept 属性，我发现这些内容类型处理了 .xlsx & .xls 扩展…

accept = application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)

accept = 应用程序/vnd.ms-excel (.XLS)

但是，我找不到 Excel CSV 文件的正确内容类型！有什么建议么？

示例：http: //jsfiddle.net/LzLcZ/

原文由 Dom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

嗯，这很尴尬……我找到了我正在寻找的解决方案，而且它再简单不过了。我使用以下代码来获得所需的结果。

 <label for="fileSelect">Spreadsheet</label>
<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />

有效接受类型：

对于 CSV 文件 (.csv)，请使用：

 <input type="file" accept=".csv" />

对于 Excel 文件 97-2003 (.xls)，使用：

 <input type="file" accept="application/vnd.ms-excel" />

对于 Excel 文件 2007+ (.xlsx)，使用：

 <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

对于 文本文件(.txt) 使用：

 <input type="file" accept="text/plain" />

对于 图像文件(.png/.jpg/etc)，使用：

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

对于 HTML 文件（.htm、.html），使用：

 <input type="file" accept="text/html" />

对于 视频文件（.avi、.mpg、.mpeg、.mp4），使用：

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

对于 音频文件（.mp3、.wav 等），请使用：

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

对于 PDF 文件，请使用：

 <input type="file" accept=".pdf" />

演示：

http://jsfiddle.net/dirtyd77/LzLcZ/144/

---

笔记：

如果您尝试显示 Excel CSV 文件 ( .csv )，请 不要 使用：

• text/csv
• application/csv
• text/comma-separated-values （ 仅适用于 Opera ）。

---

如果您尝试显示 _特定文件类型_（例如，a WAV 或 PDF ），那么这几乎总是有效…

  <input type="file" accept=".FILETYPE" />

原因如下：

application 类型通常表示打开文件的位置。例如，住所阅读器。但是当这个文件被上传时，浏览器并不关心打开并询问那个应用程序。但是扩展名，或者像 MIME image 或 audio 等直接应用于文件单元的工作。

可以将它们用于 File DOM 实例。因此，您应该使用扩展格式名称。在许多设备上，例如手机，当您单击选择文件时，用户菜单中未接受的文件会以灰色排除在外……祝您在文件上度过愉快的时光！

原文由 Dom 发布，翻译遵循 CC BY-SA 4.0 许可协议