温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

FileUpload系列:(4)HTML5的 input:f

发布时间:2020-03-11 13:48:07 来源:网络 阅读:1082 作者:lsieun 栏目:移动开发


网页上添加一个input file HTML控件:

<input id="File1" type="file" />

默认情况下,所有文件类型都会显示出来,如果想限制它只显示特定的文件类型呢,比如“word“,”excel“,”pdf“文件 

解决办法是可以给它添加一个accept属性,比如:

<input id="File1" type="file"  accept=".xls,.doc,.txt,.pdf"  />


还有另外一种形式:

<input type="file" accept="application/msword" ><br><br>accept属性列表<br>
<form> <input type="file" name="pic" id="pic" accept="p_w_picpath/gif, p_w_picpath/jpeg" /></form>


多个类型用逗号分隔开,因为accept是html5的新特性,所以火狐和IE的支持就显得单薄了


But,这只是最简单的掩人耳目的做法,还是能选择其它文件类型。

所以,如果要做到真正意义上限制类型做法(其实这种算不上限制,只是把你要的文件类型默认显示出来而已,并不是说不能选择其它的),还是要通过js或者后台来控制。


那么accept能限制哪些文件呢?见下表。

*.3gpp  audio/3gpp, video/3gpp  3GPP Audio/Video
*.ac3   audio/ac3   AC3 Audio
*.asf   allpication/vnd.ms-asf  Advanced Streaming Format
*.au    audio/basic AU Audio
*.css   text/css    Cascading Style Sheets
*.csv   text/csv    Comma Separated Values
*.doc   application/msword  MS Word Document
*.dot   application/msword  MS Word Template
*.dtd   application/xml-dtd Document Type Definition
*.dwg   p_w_picpath/vnd.dwg   AutoCAD Drawing Database
*.dxf   p_w_picpath/vnd.dxf   AutoCAD Drawing Interchange Format
*.gif   p_w_picpath/gif   Graphic Interchange Format
*.htm   text/html   HyperText Markup Language
*.html  text/html   HyperText Markup Language
*.jp2   p_w_picpath/jp2   JPEG-2000
*.jpe   p_w_picpath/jpeg  JPEG
*.jpeg  p_w_picpath/jpeg  JPEG
*.jpg   p_w_picpath/jpeg  JPEG
*.js    text/javascript, application/javascript JavaScript
*.json  application/json    JavaScript Object Notation
*.mp2   audio/mpeg, video/mpeg  MPEG Audio/Video Stream, Layer II
*.mp3   audio/mpeg  MPEG Audio Stream, Layer III
*.mp4   audio/mp4, video/mp4    MPEG-4 Audio/Video
*.mpeg  video/mpeg  MPEG Video Stream, Layer II
*.mpg   video/mpeg  MPEG Video Stream, Layer II
*.mpp   application/vnd.ms-project  MS Project Project
*.ogg   application/ogg, audio/ogg  Ogg Vorbis
*.pdf   application/pdf Portable Document Format
*.png   p_w_picpath/png   Portable Network Graphics
*.pot   application/vnd.ms-powerpoint   MS PowerPoint Template
*.pps   application/vnd.ms-powerpoint   MS PowerPoint Slideshow
*.ppt   application/vnd.ms-powerpoint   MS PowerPoint Presentation
*.rtf   application/rtf, text/rtf   Rich Text Format
*.svf   p_w_picpath/vnd.svf   Simple Vector Format
*.tif   p_w_picpath/tiff  Tagged Image Format File
*.tiff  p_w_picpath/tiff  Tagged Image Format File
*.txt   text/plain  Plain Text
*.wdb   application/vnd.ms-works    MS Works Database
*.wps   application/vnd.ms-works    Works Text Document
*.xhtml application/xhtml+xml   Extensible HyperText Markup Language
*.xlc   application/vnd.ms-excel    MS Excel Chart
*.xlm   application/vnd.ms-excel    MS Excel Macro
*.xls   application/vnd.ms-excel    MS Excel Spreadsheet
*.xlt   application/vnd.ms-excel    MS Excel Template
*.xlw   application/vnd.ms-excel    MS Excel Workspace
*.xml   text/xml, application/xml   Extensible Markup Language
*.zip   aplication/zip  Compressed Archive


参考文章:

http://www.haorooms.com/post/input_file_leixing


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI