HTML输入=“文件”接受属性文件类型（CSV）-Java 学习之路

359

我希望有人可以帮助我 .

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

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

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

file1.xlsx file1.xls file.csv

我希望将文件上传到 ONLY 显示 .xlsx ， .xls 和 .csv 文件 .

使用 accept 属性，我发现这些内容类型处理了 .xlsx 和 .xls 扩展...

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

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

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

9 回答

33
这是令人尴尬的...我找到了我正在寻找的解决方案，它不可能更简单 . 我使用以下代码来获得所需的结果 . 希望这可以帮助将来的某个人 . 谢谢大家的帮助 .
```
<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 Files 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" />
```
对于 Text Files （.txt）使用：
```
<input type="file" accept="text/plain" />
```
对于 Image Files （.png / .jpg / etc），请使用：
```
<input type="file" accept="image/*" />
```
对于 HTML Files （.htm，.html），请使用：
```
<input type="file" accept="text/html" />
```
对于 Video Files （.avi，.mpg，.mpeg，.mp4），请使用：
```
<input type="file" accept="video/*" />
```
对于 Audio Files （.mp3，.wav等），请使用：
```
<input type="file" accept="audio/*" />
```
对于 PDF Files ，请使用：
```
<input type="file" accept=".pdf" />
```
DEMO：
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" />
```
回复于 2024-05-03T03:30:49+08:00
0
我在accept属性中使用 text/comma-separated-values 用于CSV mime-type，它在Opera中运行正常 . 没有运气，试过 text/csv .

如果建议不起作用，则其他一些用于CSV的MIME类型：
- text /逗号分隔值
- text / csv
- application / csv
- application / excel
- application / vnd.ms-excel
- application / vnd.msexcel
- text / anytext
资料来源：http://filext.com/file-extension/CSV
回复于 2024-05-03T03:30:49+08:00
6
只需执行以下操作，您就可以知道任何文件的正确内容类型：

1）选择感兴趣的文件，

2）在控制台中运行：
```
console.log($('.file-input')[0].files[0].type);
```
您还可以为输入设置属性“multiple”，以便一次检查多个文件的内容类型，然后执行下一步操作：
```
for (var i = 0; i < $('.file-input')[0].files.length; i++){
    console.log($('.file-input')[0].files[i].type);
}
```
属性接受在多个属性中存在一些问题，在这种情况下无法正常工作 .
回复于 2024-05-03T03:30:49+08:00

-1

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

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

回复于 2024-05-03T03:30:49+08:00

69
这在Safari 10下对我不起作用：
```
<input type="file" accept=".csv" />
```
我不得不写这个：
```
<input type="file" accept="text/csv" />
```
回复于 2024-05-03T03:30:49+08:00
8
这些天你可以使用文件扩展名
```
<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>
```
回复于 2024-05-03T03:30:49+08:00
948

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

回复于 2024-05-03T03:30:49+08:00

使用正则表达式会更快

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

回复于 2024-05-03T03:30:49+08:00

我修改了@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属性 .

回复于 2024-05-03T03:30:49+08:00

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

9 回答

有效接受类型：

相关问题