我的页面上有一个文件上传对象。
<input type="file" ID="fileSelect" />
在我的桌面上有以下excel文件。
1.file1.xlsx 2.file1.xls 3. file.csv
我希望上传的文件****只显示.xlsx
, .xls
, & .csv
文件。
使用accept
属性,我发现这些内容类型可以照顾到.xlsx
& .xls
扩展名...
accept
= application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)
accept
= application/vnd.ms-excel (.XLS)
然而,我找不到Excel CSV文件的正确内容类型!有什么建议吗?
例子:<
>。这真是令人尴尬......我找到了我正在寻找的解决方案,而且不能再简单了。我用下面的代码得到了想要的结果。希望这对将来的人有所帮助。 谢谢大家的帮助。
<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
对于CSV文件(.csv),使用:<br/>。
<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/等),使用:
<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等),使用:{{14404726}}。
<input type="file" accept="audio/*" />
对于PDF文件,请使用:
<input type="file" accept=".pdf" />
DEMO:
注意:
如果你想显示Excel CSV文件(.csv
),请不要****使用。
text/csv
。text/comma-separated-values
(仅在Opera中有效)。如果你试图显示一个特定的文件类型(例如,一个WAV
或PDF
),那么这几乎总是有效的...
<input type="file" accept=".FILETYPE" />
据我所知,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);" />
我想这对你会有帮助,当然你可以根据你的需要来改变这个脚本。
我在接受属性中使用text/comma-separated-values
作为CSV的模拟类型,在Opera中运行良好。我试过text/csv
,但没有成功。
如果建议的CSV的MIME类型不工作,那么其他一些MIME类型也不工作。
你可以通过以下步骤知道任何文件的正确内容类型。
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在多属性上有一些问题,在这种情况下不能正确工作。
我修改了 @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;
}
我有一个自定义的验证构建,因为在打开文件窗口中,用户仍然可以选择选项"所有文件('*')",不管我是否在输入元素中明确设置了accept属性。