1、input type='file'
需求：用户点击按钮弹出选择文件框框，可以多选，可以单选，然后将用户选择的文件缓存，需要在界面显示用户选择了哪些文件， 文件大小不能超过50M，不可以一次上传相同文件两次，上传之前可以逐一删除选择过的文件。
效果如下：
image
1、文件多选：给input加上 multiple="multiple"即可多选。
2、限制文件后缀：加上accept='.csv' accept的值就是你想控制的文件后缀名。
3、样式：input file的样式不可改变，将input透明，用div做一个按钮，将input覆盖上面即可。
4、上传文件：项目框架react，UI层用ant design，故第一次开发时候选用了Upload组件，该组件上传一个文件很方便，直接引入组件即可，但是组件有一个缺点，点击就会直接上传，与需求不符。想来想去决定用户选择文件即把文件传给后端，后端将该文件对应的路径返回给我，在用户点击导入的时候，将对应的用户信息和文件路径在给后端传过去。但是由于项目进展，后端共享服务器，用户每次上传的文件会散落在多台服务器上，所以两次上传pass，决定用原生来做。
解决方案链接
其他：
html input="file" 浏览时只显示指定文件类型
Valid Accept Types:
For
CSV
files (.csv), use:
<input type="file" accept=".csv" />
For
Excel Files 2003-2007
(.xls), use:
<input type="file" accept="application/vnd.ms-excel" />
For
Excel Files 2010
(.xlsx), use:
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
For
Text Files
(.txt) use:
<input type="file" accept="text/plain" />
For
Image Files
(.png/.jpg/etc), use:
<input type="file" accept="image/*" />
For
HTML Files
(.htm,.html), use:
<input type="file" accept="text/html" />
For
Video Files
(.avi, .mpg, .mpeg, .mp4), use:
<input type="file" accept="video/*" />
For
Audio Files
(.mp3, .wav, etc), use:
<input type="file" accept="audio/*" />
For
PDF Files
, use:
<input type="file" accept=".pdf" />
DEMO:
http://jsfiddle.net/dirtyd77/LzLcZ/144/
NOTE:
If you are trying to display Excel CSV files (.csv), do
NOT
use:
-
text/csv -
application/csv -
text/comma-separated-values(works in Opera only
).
If you are trying to display a
particular file type
(for example, a WAV or PDF), then this will almost always work...
<input type="file" accept=".FILETYPE" />
原文：http://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv
网友评论