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

Question

我的HTML看起来像这样:

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

pattern = '?'

使用哪个正则表达式我将添加唯一CSV文件允许的验证.

如果我上传.xls或任何其他文件,那么它将显示错误.

Answer 1

现在您可以使用新的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" /> 

Answer 2

仅接受其中一种文件类型并不容易。这取决于不同的操作系统和安装的文本阅读程序。在 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并且对于任何文本类型文件都可以不同。这是您可以阅读更多内容的链接。

Answer 3

用这个:

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

提到这种MIME类型是很好的做法.