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

HTML Input="file" Accept Attribute File Type (CSV)

提问by Dom

I have a file upload object on my page:

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

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

with the following excel files on my desktop:

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

1. file1.xlsx
2. file1.xls
3. file.csv

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

I want the file upload to ONLYshow .xlsx, .xls, & .csvfiles.

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

Using the acceptattribute, I found these content-types took care of .xlsx& .xlsextensions...

使用该accept属性，我发现这些内容类型负责.xlsx和.xls扩展...

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

accept= application/vnd.ms-excel (.XLS)

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

accept= application/vnd.ms-excel (.XLS)

However, I cannot find the correct content-type for an Excel CSV file! Any suggestions?

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

EXAMPLE: http://jsfiddle.net/LzLcZ/

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

回答by Dom

Well this is embarrassing... I found the solution I was looking for and it couldn't be simpler. I used the following code to get the desired result. Hope this helps someone in the future. Thanks everyone for your help.

嗯，这很尴尬……我找到了我正在寻找的解决方案，而且再简单不过了。我使用以下代码来获得所需的结果。希望这对未来的人有所帮助。感谢大家的帮助。

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

Valid Accept Types:

有效的接受类型：

For CSVfiles (.csv), use:

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

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

For Excel Files 97-2003(.xls), use:

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

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

For Excel Files 2007+(.xlsx), use:

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

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

For Text Files(.txt) use:

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

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

For Image Files(.png/.jpg/etc), use:

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

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

For HTML Files(.htm,.html), use:

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

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

For Video Files(.avi, .mpg, .mpeg, .mp4), use:

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

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

For Audio Files(.mp3, .wav, etc), use:

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

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

For PDF Files, use:

对于PDF 文件，请使用：

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

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

演示：http:
//jsfiddle.net/dirtyd77/LzLcZ/144/

---

---

NOTE:

笔记：

If you are trying to display Excel CSV files (.csv), do NOTuse:

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

• text/csv
• application/csv
• text/comma-separated-values(works in Opera only).

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

---

---

If you are trying to display a particular file type(for example, a WAVor PDF), then this will almost always work...

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

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

回答by Big Money

These days you can just use the file extension

这些天你可以只使用文件扩展名

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

回答by yogi

Dom this attribute is very old and not accepted in modern browsers as far as I know, But here is an alternative to it, Try this

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

I guess it'll help you of course you can change this script according to your needs.

我想它会帮助你当然你可以根据你的需要更改这个脚本。

回答by jaysponsored

I have used text/comma-separated-valuesfor CSV mime-type in accept attribute and it works fine in Opera. Tried text/csvwithout luck.

我text/comma-separated-values在接受属性中使用了 CSV mime-type，它在 Opera 中运行良好。尝试text/csv没有运气。

Some others MIME-Types for CSV if the suggested do not work:

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

• text/comma-separated-values
• text/csv
• application/csv
• application/excel
• application/vnd.ms-excel
• application/vnd.msexcel
• text/anytext

• 文本/逗号分隔值
• 文本/csv
• 应用程序/csv
• 应用程序/excel
• 应用程序/vnd.ms-excel
• 应用程序/vnd.msexcel
• 文本/任何文本

Source: http://filext.com/file-extension/CSV

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

回答by trojan

This didn't work for me under Safari 10:

这在 Safari 10 下对我不起作用：

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

I had to write this instead:

我不得不写这个：

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

回答by Olga Lisovskaya

You can know the correct content-type for any file by just doing the following:

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

1) Select interested file,

1) 选择感兴趣的文件，

2) And run in console this:

2）并在控制台中运行：

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

You can also set attribute "multiple" for your input to check content-type for several files at a time and do next:

您还可以为您的输入设置属性“multiple”以一次检查多个文件的内容类型，然后执行以下操作：

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

Attribute accept has some problems with multiple attribute and doesn't work correctly in this case.

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

回答by RenatoIvancic

I have modified the solution of @yogi. The addition is that when the file is of incorrect format I reset the input element value.

我已经修改了@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;
}

I have custom verification buildin, because in open file window the user can still choose the options "All files ('*')", regardless if I explicitly set the accept attribute in input element.

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

回答by iiic

Now you can use new html5 input validation attribute pattern=".+\.(xlsx|xls|csv)".

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