关于html: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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理