likes
comments
collection
share

html中input的accept总结

作者站长头像
站长
· 阅读数 38

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

扩展名
.3gppaudio/3gpp, video/3gpp
.ac3audio/ac3
.asfallpication/vnd.ms-asf
.auaudio/basic
.csstext/css
.csvtext/csv
.docapplication/msword
.dotapplication/msword
.dtdapplication/xml-dtd
.dwgimage/vnd.dwg
.dxfimage/vnd.dxf
.gifimage/gif
.htmtext/html
.htmltext/html
.jp2image/jp2
.jpeimage/jpeg
.jpegimage/jpeg
.jpgimage/jpeg
.jstext/javascript, application/javascript
.jsonapplication/json
.mp2audio/mpeg, video/mpeg
.mp3audio/mpeg
.mp4audio/mp4, video/mp4
.mpegvideo/mpeg
.mpgvideo/mpeg
.mppapplication/vnd.ms-project
.oggapplication/ogg, audio/ogg
.pdfapplication/pdf
.pngimage/png
.potapplication/vnd.ms-powerpoint
.ppsapplication/vnd.ms-powerpoint
.pptapplication/vnd.ms-powerpoint
.rtfapplication/rtf, text/rtf
.svfimage/vnd.svf
.tifimage/tiff
.tiffimage/tiff
.txttext/plain
.wdbapplication/vnd.ms-works
.wpsapplication/vnd.ms-works
.xhtmlapplication/xhtml+xml
.xlcapplication/vnd.ms-excel
.xlmapplication/vnd.ms-excel
.xlsapplication/vnd.ms-excel
.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xltapplication/vnd.ms-excel
.xlwapplication/vnd.ms-excel
.xmltext/xml, application/xml
.zipaplication/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();

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

转载自:https://segmentfault.com/a/1190000041796669
评论
请登录