1、input type='file'
需求:用户点击按钮弹出选择文件框框,可以多选,可以单选,然后将用户选择的文件缓存,需要在界面显示用户选择了哪些文件, 文件大小不能超过50M,不可以一次上传相同文件两次,上传之前可以逐一删除选择过的文件。
效果如下:
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