如何使用 HTML5 使用模式属性验证仅 CSV 文件上传？

Posted 2023-02-21

【中文标题】如何使用 HTML5 使用模式属性验证仅 CSV 文件上传？

【英文标题】：How can I validate for only CSV file uploads using the pattern attribute using HTML5?

【发布时间】：2016-03-27 05:40:18

【问题描述】：

我的 html 如下所示：

<form>
    <input type="file" name="txtFile" pattern="?" id="txtFile" class="required"/>
</form>

pattern = '?'

使用哪个正则表达式，我会为 ONLY CSV FILE ALLOW 添加验证。

如果我上传 .xls 或任何其他文件，则会显示错误。

【问题讨论】：

你需要 javascript/jquery 代码来验证

@Disha：是的，应该可以使用 js，但我必须使用 html5..

@Disha: 编辑不错

@Disha：我怀疑这个孤立的结束标签比其他任何标签都更常用（显然在非 HTML 文本中，或者应该是）。我无法证明这一点——谷歌、雅虎搜索和必应在被告知搜索时都会忽略非字母字符——但这就是 ISTM。

【参考方案1】：

只接受其中一种文件类型并不容易。它取决于不同的操作系统和安装的文本阅读程序。在 Unix 类型系统中，如果您传递 .csv 文件，您将得到 .csv 文件类型，但如果您在 Windows 上传递相同的文件，您将获得不同的文件类型，例如 text/comma-separated-values, text/csv, application/csv, application/excel, application/vnd.ms-excel, application/vnd.msexcel, text/anytext。

它调用mime-types 并且对于任何文本类型的文件都可以不同。 这是您可以read more的链接。

【参考方案2】：

使用这个：

<input type="file" name="txtFile" id="txtFile" class="required" accept=".csv,text/csv" />

提及MIME 类型是一种很好的做法。

【参考方案3】：

现在您可以使用新的 HTML5 输入验证属性：

pattern="^.+\.(xlsx|xls|csv)$"

接受其他文件的类型（参考：HTML5 文档）：

对于 CSV：

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

对于 Excel 文件，2003-2007 (.xls)：

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

对于 Excel 文件，2010 (.xlsx)：

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

对于文本文件 (.txt)：

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

对于图像文件（.png、.jpg 等）：

<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" /> 

【讨论】：

***.com/questions/11832930/… ???

@Disha：当然，提到了参考。你也可以上网

【参考方案4】：

试试这个：

<input type="file" name="txtFile" accept=".csv" id="txtFile" class="required" />

【讨论】：

使用接受属性可以验证任何类型的文件扩展名，例如接受=".csv,.xls,.xlsx"