我是靠谱客的博主 愉快豌豆,这篇文章主要介绍前端上传文件限制指定文件类型 xls、xlsx、csv、image、video等,现在分享给大家,希望可以做个参考。

当我想要限制上传的文件格式时

第一种

  • csv
复制代码
1
2
<input type="file" accept=".csv" />
  • .xls(Excel Files 97-2003)
复制代码
1
2
<input type="file" accept="application/vnd.ms-excel" />
  • .xlsx(Excel Files 2007+ )
复制代码
1
2
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
  • .txt
复制代码
1
2
<input type="file" accept="text/plain" />
  • .png/.jpg/etc
复制代码
1
2
<input type="file" accept="image/*" />
  • .htm,.html
复制代码
1
2
<input type="file" accept="text/html" />
  • .avi, .mpg, .mpeg, .mp4
复制代码
1
2
<input type="file" accept="video/*" />
  • .mp3, .wav, etc
复制代码
1
2
<input type="file" accept="audio/*" />
  • PDF
复制代码
1
2
<input type="file" accept=".pdf" />

注意:当你想要能够上传csv时 不要使用以下:

复制代码
1
2
3
4
text/csv application/csv text/comma-separated-values (works in Opera only).

第二种

复制代码
1
2
<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>

踩坑:
一些基于upload封装的组件,当我在使用accept的时候,他会报错图片格式问题,具体原因不详。
可以参考:
https://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv

最后

以上就是愉快豌豆最近收集整理的关于前端上传文件限制指定文件类型 xls、xlsx、csv、image、video等的全部内容,更多相关前端上传文件限制指定文件类型内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(76)

评论列表共有 0 条评论

立即
投稿
返回
顶部