Question

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

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

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

file1.xlsx

file1.xls

FILE.CSV

我希望将文件上传到仅显示.xlsx，.xls和＆amp; .csv个文件。

使用accept属性，我发现这些内容类型负责.xlsx＆amp; .xls个扩展程序......

accept = application / vnd.openxmlformats-officedocument.spreadsheetml.sheet（.XLSX）

accept = application / vnd.ms-excel（.XLS）

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

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

Answer 1

这是令人尴尬的...我找到了我正在寻找的解决方案，但这并不简单。我使用以下代码来获得所需的结果。希望这可以帮助将来的某个人。谢谢大家的帮助。

<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 Files 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），请执行 NOT ：

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

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

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

Answer 2

现在您可以使用文件扩展名

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

Answer 3

Dom这个属性很老，据我所知在现代浏览器中不被接受，但是这里有替代它，试试这个

<script type="text/javascript" language="javascript">
function checkfile(sender) {
    var validExts = new Array(".xlsx", ".xls", ".csv");
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0) {
      alert("Invalid file selected, valid files are of " +
               validExts.toString() + " types.");
      return false;
    }
    else return true;
}
</script>

<input type="file" id="file" onchange="checkfile(this);" />

我想这对你有帮助，当然你可以根据自己的需要改变这个脚本。

Answer 4

我在accept属性中使用了text/comma-separated-values用于CSV mime-type，它在Opera中运行正常。试试text/csv没有运气。

如果建议不起作用，则为CSV的其他一些MIME类型：

text /逗号分隔值
文本/ CSV
应用/ CSV
application / excel
application / vnd.ms-excel
应用/ vnd.msexcel
文本/ anytext

来源：http://filext.com/file-extension/CSV

Answer 5

这在Safari 10下对我无效：

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

我不得不写这个：

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

Answer 6

只需执行以下操作即可知道任何文件的正确内容类型：

1）选择感兴趣的文件，

2）然后在控制台中运行：

console.log($('.file-input')[0].files[0].type);

您还可以设置属性＆＃34; multiple＆＃34;输入要一次检查多个文件的内容类型，然后执行下一步操作：

for (var i = 0; i < $('.file-input')[0].files.length; i++){
    console.log($('.file-input')[0].files[i].type);
}

属性接受在多个属性方面存在一些问题，在这种情况下无法正常工作。

Answer 7

例如，除了排名靠前的答案外，CSV文件在macOS中报告为文本/纯文本，在Windows下报告为application / vnd.ms-excel。所以我用这个：

<input type="file" accept="text/plain, .csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />

Answer 8

我修改了@yogi的解决方案。另外一点是，当文件格式不正确时，我重置输入元素值。

function checkFile(sender, validExts) {
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0 && fileExt != "") {
        alert("Invalid file selected, valid files are of " +
                 validExts.toString() + " types.");
        $(sender).val("");
        return false;
    }
    else return true;
}

我有自定义验证buildin，因为在打开文件窗口中，用户仍然可以选择“所有文件（'*'）”选项，无论我是否在输入元素中显式设置了accept属性。

Answer 9

现在您可以使用新的html5输入验证属性pattern=".+\.(xlsx|xls|csv)"。

Answer 10

经过测试，在[macOS 10.15.7 Catalina]上，【Dom / Rikin Patel】的回答无法正常识别[.xlsx]文件。

我亲自总结了大多数现有答案的做法，并通过了个人测试。总结以下答案：

accept=".csv, .xls, .xlsx, text/csv, application/csv,
text/comma-separated-values, application/csv, application/excel,
application/vnd.msexcel, text/anytext, application/vnd. ms-excel,
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

Answer 11

使用正则表达式会更快

    function checkIsExcel(file) {
        if ((!/.*\.xlsx$/.test(file.name)) && (!/.*\.xls$/.test(file.name)) && (!/.*\.csv$/.test(file.name))) {
            return false;
        }
        return true;
    }

HTML输入=“文件”接受属性文件类型（CSV）

11 个答案:

有效接受类型：