html中input的accept总结

1.开发环境 vue2
2.电脑系统 windows11专业版
3.在开发的过程中,我们经常会使用input,我们有时候需要设置input的accept属性规定通过文件上传来提交的文件的类型。下面我来做下总结。
4.accept值:

扩展名	值
.3gpp	audio/3gpp, video/3gpp
.ac3	audio/ac3
.asf	allpication/vnd.ms-asf
.au	audio/basic
.css	text/css
.csv	text/csv
.doc	application/msword
.dot	application/msword
.dtd	application/xml-dtd
.dwg	image/vnd.dwg
.dxf	image/vnd.dxf
.gif	image/gif
.htm	text/html
.html	text/html
.jp2	image/jp2
.jpe	image/jpeg
.jpeg	image/jpeg
.jpg	image/jpeg
.js	text/javascript, application/javascript
.json	application/json
.mp2	audio/mpeg, video/mpeg
.mp3	audio/mpeg
.mp4	audio/mp4, video/mp4
.mpeg	video/mpeg
.mpg	video/mpeg
.mpp	application/vnd.ms-project
.ogg	application/ogg, audio/ogg
.pdf	application/pdf
.png	image/png
.pot	application/vnd.ms-powerpoint
.pps	application/vnd.ms-powerpoint
.ppt	application/vnd.ms-powerpoint
.rtf	application/rtf, text/rtf
.svf	image/vnd.svf
.tif	image/tiff
.tiff	image/tiff
.txt	text/plain
.wdb	application/vnd.ms-works
.wps	application/vnd.ms-works
.xhtml	application/xhtml+xml
.xlc	application/vnd.ms-excel
.xlm	application/vnd.ms-excel
.xls	application/vnd.ms-excel
.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xlt	application/vnd.ms-excel
.xlw	application/vnd.ms-excel
.xml	text/xml, application/xml
.zip	aplication/zip

5.使用input怎么动态设置accept呢?

// template代码
<form class="fileUpdateForm">
  <input type="file" 
  name="uploadFile" 
  class="filesrc" 
  @change="changeFile">
</form>

//方法代码
this.$el.querySelector('.filesrc').accept = this.localUploadOptions.acceptType;
this.$el.querySelector('.filesrc').click();

6.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。