blocks|key|215064|text|Dom这个属性非常旧，据我所知在现代浏览器中不被接受，但这里有一个替代它的方法，试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|215065|<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+"+%2B
+++++++++++++++validExts.toString()+%2B+"+types.");
++++++return+false;
++++}
++++else+return+true;
}
</script>

<input+type="file"+id="file"+onchange="checkfile(this);"+/>|code-block|syntax|javascript|215066|我想它会帮到你，当然你可以根据你的需要修改这个脚本。|215067|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

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

&lt;input type="file" id="file" onchange="checkfile(this);" /&gt;
</code></pre>

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

blocks|key|220203|text|这太尴尬了..。我找到了我正在寻找的解决方案，而且再简单不过了。我使用以下代码来获得所需的结果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220204|<input+id="fileSelect"+type="file"+accept=".csv,+application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,+application/vnd.ms-excel"+/>++|code-block|syntax|javascript|220205|有效的接受类型：|220206|对于CSV文件(.csv)，请使用：|offset|length|style|BOLD|220207|<input+type="file"+accept=".csv"+/>|220208|对于Excel文件97-2003+(.xls)，请使用：|220209|<input+type="file"+accept="application/vnd.ms-excel"+/>|220210|对于Excel+Files+2007%2B+(.xlsx)，请使用：|220211|<input+type="file"+accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"+/>|220212|对于文本文件+(.txt)，请使用：|220213|<input+type="file"+accept="text/plain"+/>|220214|对于图像文件+(.png/.jpg/etc)，请使用：|220215|<input+type="file"+accept="image/*"+/>|220216|对于HTML文件+(.htm、.html)，请使用：|220217|<input+type="file"+accept="text/html"+/>|220218|对于视频文件+(.avi、.mpg、.mpeg、.mp4)，请使用：|220219|<input+type="file"+accept="video/*"+/>|220220|对于音频文件+(.mp3、.wav等)，请使用：|220221|<input+type="file"+accept="audio/*"+/>|220222|对于PDF文件，请使用：|220223|<input+type="file"+accept=".pdf"+/>+|220224|演示：|220225|http://jsfiddle.net/dirtyd77/LzLcZ/144/|220226|220227|注意：|220228|如果您正在尝试显示Excel+CSV文件(.csv)，do+NOT+use：|CODE|220229|220230|text/csv|unordered-list-item|220231|application/csv|220232|text/comma-separated-values+(仅适用于歌剧)。|220233|220234|220235|如果您正在尝试显示特定的文件类型(例如，WAV或PDF)，则这几乎总是有效的……|220236|+<input+type="file"+accept=".FILETYPE"+/>|220237|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|2|3|0|0|2|E|0|0|2|H|0|0|2|4|0|0|2|4|0|0|2|6|0|0|2|4|0|0|2|4|0|0|2|5|0|0|0|0|13|0|0|0|0|L|4|U|3|0|0|0|8|0|0|F|0|0|R|0|0|0|K|3|O|3|0|0^^$0|@$1|2|3|4|5|6|7|2H|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|2I|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|2J|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|2K|8|@$K|2L|L|2M|M|N]]|9|@]|A|$]]|$1|O|3|P|5|D|7|2N|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|2O|8|@$K|2P|L|2Q|M|N]]|9|@]|A|$]]|$1|S|3|T|5|D|7|2R|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|2S|8|@$K|2T|L|2U|M|N]]|9|@]|A|$]]|$1|W|3|X|5|D|7|2V|8|@]|9|@]|A|$E|F]]|$1|Y|3|Z|5|6|7|2W|8|@$K|2X|L|2Y|M|N]]|9|@]|A|$]]|$1|10|3|11|5|D|7|2Z|8|@]|9|@]|A|$E|F]]|$1|12|3|13|5|6|7|30|8|@$K|31|L|32|M|N]]|9|@]|A|$]]|$1|14|3|15|5|D|7|33|8|@]|9|@]|A|$E|F]]|$1|16|3|17|5|6|7|34|8|@$K|35|L|36|M|N]]|9|@]|A|$]]|$1|18|3|19|5|D|7|37|8|@]|9|@]|A|$E|F]]|$1|1A|3|1B|5|6|7|38|8|@$K|39|L|3A|M|N]]|9|@]|A|$]]|$1|1C|3|1D|5|D|7|3B|8|@]|9|@]|A|$E|F]]|$1|1E|3|1F|5|6|7|3C|8|@$K|3D|L|3E|M|N]]|9|@]|A|$]]|$1|1G|3|1H|5|D|7|3F|8|@]|9|@]|A|$E|F]]|$1|1I|3|1J|5|6|7|3G|8|@$K|3H|L|3I|M|N]]|9|@]|A|$]]|$1|1K|3|1L|5|D|7|3J|8|@]|9|@]|A|$E|F]]|$1|1M|3|1N|5|6|7|3K|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|6|7|3L|8|@]|9|@$K|3M|L|3N|1|3O]]|A|$]]|$1|1Q|3|-4|5|6|7|3P|8|@]|9|@]|A|$]]|$1|1R|3|1S|5|6|7|3Q|8|@]|9|@]|A|$]]|$1|1T|3|1U|5|6|7|3R|8|@$K|3S|L|3T|M|1V]|$K|3U|L|3V|M|N]]|9|@]|A|$]]|$1|1W|3|-4|5|6|7|3W|8|@]|9|@]|A|$]]|$1|1X|3|1Y|5|1Z|7|3X|8|@$K|3Y|L|3Z|M|1V]]|9|@]|A|$]]|$1|20|3|21|5|1Z|7|40|8|@$K|41|L|42|M|1V]]|9|@]|A|$]]|$1|22|3|23|5|1Z|7|43|8|@$K|44|L|45|M|1V]]|9|@]|A|$]]|$1|24|3|-4|5|6|7|46|8|@]|9|@]|A|$]]|$1|25|3|-4|5|6|7|47|8|@]|9|@]|A|$]]|$1|26|3|27|5|6|7|48|8|@$K|49|L|4A|M|1V]|$K|4B|L|4C|M|1V]]|9|@]|A|$]]|$1|28|3|29|5|D|7|4D|8|@]|9|@]|A|$E|F]]|$1|2A|3|-4|5|6|7|4E|8|@]|9|@]|A|$]]]|2B|$2C|$5|2D|2E|2F|A|$2G|1P]]]]

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.
<pre><code>&lt;input id=&quot;fileSelect&quot; type=&quot;file&quot; accept=&quot;.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel&quot; /&gt; 
</code></pre>
<h2>Valid Accept Types:</h2>
For CSV files (.csv), use: 
<pre><code>&lt;input type=&quot;file&quot; accept=&quot;.csv&quot; /&gt;
</code></pre>
For Excel Files 97-2003 (.xls), use: 
<pre><code>&lt;input type=&quot;file&quot; accept=&quot;application/vnd.ms-excel&quot; /&gt;
</code></pre>
For Excel Files 2007+ (.xlsx), use: 
<pre><code>&lt;input type=&quot;file&quot; accept=&quot;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet&quot; /&gt;
</code></pre>
For Text Files (.txt) use: 
<pre><code>&lt;input type=&quot;file&quot; accept=&quot;text/plain&quot; /&gt;
</code></pre>
For Image Files (.png/.jpg/etc), use: 
<pre><code>&lt;input type=&quot;file&quot; accept=&quot;image/*&quot; /&gt;
</code></pre>
For HTML Files (.htm,.html), use: 
<pre><code>&lt;input type=&quot;file&quot; accept=&quot;text/html&quot; /&gt;
</code></pre>
For Video Files (.avi, .mpg, .mpeg, .mp4), use:
<pre><code>&lt;input type=&quot;file&quot; accept=&quot;video/*&quot; /&gt;
</code></pre>
For Audio Files (.mp3, .wav, etc), use:
<pre><code>&lt;input type=&quot;file&quot; accept=&quot;audio/*&quot; /&gt;
</code></pre>
For PDF Files, use:
<pre><code>&lt;input type=&quot;file&quot; accept=&quot;.pdf&quot; /&gt; 
</code></pre>
DEMO: 
<a href="http://jsfiddle.net/dirtyd77/LzLcZ/144/" rel="noreferrer">http://jsfiddle.net/dirtyd77/LzLcZ/144/</a>
<hr/>
NOTE:
If you are trying to display Excel CSV files (<code>.csv</code>), do NOT use:
<ul>
<li><code>text/csv</code></li>
<li><code>application/csv</code></li>
<li><code>text/comma-separated-values</code> (works in Opera only).</li>
</ul>
<hr />
If you are trying to display a particular file type (for example, a <code>WAV</code> or <code>PDF</code>), then this will almost always work...
<pre><code> &lt;input type=&quot;file&quot; accept=&quot;.FILETYPE&quot; /&gt;
</code></pre>

blocks|key|218529|text|我在accept属性中对CSV+mime类型使用了text/comma-separated-values，它在Opera语言中工作得很好。尝试了text/csv，但没有成功。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|218530|其他一些用于CSV的MIME类型，如果建议的不起作用：|218531|218532|text/comma-separated-values+|unordered-list-item|218533|text/csv|218534|application/csv|218535|application/excel+|218536|application/vnd.ms-excel+|218537|application/vnd.msexcel|218538|text/anytext|218539|218540|来源：http://filext.com/file-extension/CSV|218541|entityMap|0|LINK|mutability|MUTABLE|url|http://filext.com/file-extension/CSV^0|P|R|20|8|0|0|0|0|0|0|0|0|0|0|0|3|10|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|1F|8|@]|D|@]|E|$]]|$1|L|3|M|5|K|7|1G|8|@]|D|@]|E|$]]|$1|N|3|O|5|K|7|1H|8|@]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1I|8|@]|D|@]|E|$]]|$1|R|3|S|5|K|7|1J|8|@]|D|@]|E|$]]|$1|T|3|U|5|K|7|1K|8|@]|D|@]|E|$]]|$1|V|3|W|5|K|7|1L|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1N|8|@]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|10|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]]]

I have used <code>text/comma-separated-values</code> for CSV mime-type in accept attribute and it works fine in Opera. Tried <code>text/csv</code> without luck.

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

<ul>
<li>text/comma-separated-values </li>
<li>text/csv</li>
<li>application/csv</li>
<li>application/excel </li>
<li>application/vnd.ms-excel </li>
<li>application/vnd.msexcel</li>
<li>text/anytext</li>
</ul>

Source: <a href="http://filext.com/file-extension/CSV" rel="noreferrer">http://filext.com/file-extension/CSV</a>

blocks|key|3078755|text|现在可以使用新的html5输入验证属性pattern=".%2B\.(xlsx%7Cxls%7Ccsv)"了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3078756|entityMap^0|J|S|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

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

blocks|key|2865455|text|我已经修改了@yogi的解决方案。另外，当文件的格式不正确时，我会重置输入元素的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2865456|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+"+%2B
+++++++++++++++++validExts.toString()+%2B+"+types.");
++++++++$(sender).val("");
++++++++return+false;
++++}
++++else+return+true;
}|code-block|syntax|javascript|2865457|我有自定义的内置验证，因为在打开的文件窗口中，用户仍然可以选择“所有文件('*')”选项，而不管我是否在input元素中显式地设置了accept属性。|2865458|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

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

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.

blocks|key|215106|text|您只需执行以下操作即可知道任何文件的正确内容类型：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|215107|1)选择感兴趣的文件，|215108|2)并在控制台运行此命令：|215109|console.log($('.file-input')[0].files[0].type);|code-block|syntax|javascript|215110|您还可以为您的输入设置属性"multiple“，以便一次检查多个文件的内容类型，然后执行以下操作：|215111|for+(var+i+=+0;+i+<+$('.file-input')[0].files.length;+i%2B%2B){
++++console.log($('.file-input')[0].files[i].type);
}|215112|属性接受在多个属性上有一些问题，在这种情况下不能正常工作。|215113|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

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

1) Select interested file, 

2) And run in console this:

<pre><code>console.log($('.file-input')[0].files[0].type);
</code></pre>

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

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

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

blocks|key|218577|text|在Safari+10下，这对我不起作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|218578|<input+type="file"+accept=".csv"+/>|code-block|syntax|javascript|218579|我不得不写下以下内容：|218580|<input+type="file"+accept="text/csv"+/>|218581|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

This didn't work for me under Safari 10:

<pre><code>&lt;input type="file" accept=".csv" /&gt;
</code></pre>

I had to write this instead:

<pre><code>&lt;input type="file" accept="text/csv" /&gt;
</code></pre>

blocks|key|3078828|text|现在你可以只使用文件扩展名|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3078829|<input+type="file"+ID="fileSelect"+accept=".xlsx,+.xls,+.csv"/>|code-block|syntax|javascript|3078830|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

These days you can just use the file extension

<pre><code>&lt;input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/&gt;
</code></pre>

blocks|key|218601|text|例如，除了首选答案之外，CSV文件在macOS下报告为text/plain，而在Windows下报告为应用程序/vnd.ms-excel。所以我使用这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|218602|<input+type="file"+accept="text/plain,+.csv,+application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,+application/vnd.ms-excel"+/>|code-block|syntax|javascript|218603|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In addition to the top-answer, CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows.
So I use this:
<pre><code>&lt;input type=&quot;file&quot; accept=&quot;text/plain, .csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel&quot; /&gt;
</code></pre>

blocks|key|215182|text|经过我的测试，在[macOS+10.15.7Catalina]上，[Dom/+Rikin+Patel]的答案无法正常识别.xlsx文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|215183|我个人总结了大多数现有答案的实践，并通过了个人测试。总结以下答案：|215184|215185|+accept=".csv，.xls，.xlsx，文本/csv，应用程序/csv，文本/逗号分隔值，应用程序/csv，应用程序/excel，应用程序/vnd.msexcel，文本/任意文本，应用程序/vnd.ms-excel，vnd.ms-excel|blockquote|215186|215187|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|M|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|N|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|J|$]]

After my test, on 【macOS 10.15.7 Catalina】, the answer of 【Dom / Rikin Patel】 cannot recognize the [.xlsx] file normally.
I personally summarized the practice of most of the existing answers and passed personal tests. Sum up the following answers:
<blockquote>
<pre><code>accept=&quot;.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&quot;
</code></pre>
</blockquote>

I have a file upload object on my page:
<pre><code>&lt;input type=&quot;file&quot; ID=&quot;fileSelect&quot; /&gt;
</code></pre>
with the following excel files on my desktop:
<blockquote>
<ol>
<li>file1.xlsx</li>
<li>file1.xls</li>
<li>file.csv</li>
</ol>
</blockquote>
I want the file upload to ONLY show <code>.xlsx</code>, <code>.xls</code>, &amp; <code>.csv</code> files.
Using the <code>accept</code> attribute, I found these content-types took care of <code>.xlsx</code> &amp; <code>.xls</code> extensions...
<blockquote>
<code>accept</code>= application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)
<code>accept</code>= application/vnd.ms-excel (.XLS)
</blockquote>
However, I cannot find the correct content-type for an Excel CSV file! Any suggestions?
EXAMPLE: <a href="http://jsfiddle.net/LzLcZ/" rel="noreferrer">http://jsfiddle.net/LzLcZ/</a>

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

Windows

我的页面上有一个文件上传对象：<input type="file" ID="fileSelect" />在我的桌面上有以下excel文件：file1.xlsxfile1.xlsfile.csv我想要的文件上传到只显示.xlsx，.xls和.csv文件。使用accept属性，我发现这些内容类型负责.xlsx和.xls扩展...

问HTML Input=“文件”接受属性文件类型(CSV)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML Input=“文件”接受属性文件类型(CSV)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML Input=“文件”接受属性文件类型(CSV)
EN