如何僅使用HTML5使用模式屬性驗證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" /> 

對於圖像文件（巴紐， .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

試試這個：

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

Answer 3

使用此：

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

提MIME類型是很好的做法。