HTML输入=“file"CSV文件类型

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

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

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

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

我想要文件上传到只<强> < / >强显示.xlsx， .xls， &# EYZ2文件。

使用accept属性，我发现这些内容类型照顾.xlsx &# EYZ2扩展……

# EYZ0 =应用程序/ vnd.openxmlformats-officedocument.spreadsheetml。表(.XLSX)

#盾EYZ0 =应用程序/。ms excel (xls)

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

例如:# EYZ0

759957 次浏览
小开

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

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

小开

这太尴尬了……我找到了我一直在寻找的解决方案，而且再简单不过了。我使用以下代码来获得所需的结果。

<label for="fileSelect">Spreadsheet</label>
<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档案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" />
< p >演示:
# EYZ0 < / p >

注意:

如果您试图显示Excel CSV文件(.csv)，请使用<强> < / >强不:

  • # EYZ0
  • # EYZ0
  • # EYZ0 (# EYZ1)。

如果你试图显示一个特定的文件类型(例如，一个WAV或PDF)，那么这几乎总是工作…

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

原因如下:

application 类型通常表示打开文件的位置。 例如，Abode Reader。 但是当这个文件上传时，浏览器并不关心打开并询问该应用程序。但是，扩展名或键入字，如MIME image 或audio等，可以直接应用于文件单元 可以在File DOM实例中使用它们。 因此，您应该使用扩展格式名称。 在许多设备上，如手机，它是看到当你点击选择文件，非接受的文件在用户菜单中被排除在灰色… 有一个伟大的时间花在您的文件!< / p >
小开

我已经在接受属性中使用text/comma-separated-values为CSV mime-type，它在Opera中工作良好。试过text/csv，运气不好。

如果建议的不工作，其他一些mime类型用于CSV:

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

来源:# EYZ0

小开

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

小开

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

我有自定义验证内置，因为在打开的文件窗口中，用户仍然可以选择选项"All files ('*')"，无论我是否显式地设置输入元素中的接受属性。

小开

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

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);
}

Attribute accept对于多个属性有一些问题，在这种情况下不能正确工作。

小开

在Safari 10下，这对我来说行不通:

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

我不得不这样写:

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

现在你可以只使用文件扩展名

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

除了顶部的答案，CSV文件，例如，在macOS下报告为文本/纯，但作为application/vnd。ms-excel。 所以我使用这个:

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

经过我的测试，在【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"
小开

您可以使用以下接受类型

<input id="upload_file" accept="image/png,image/jpg,image/jpeg,.doc, .docx,.xls,.xlsx,.pdf,.csv," name="upload_file" type="file"/>

小开

只写你想要接受的扩展，在动作atr中以逗号分隔

<input type="file" accept=".any, .ext, .you, .want">

提交答案