关闭

Html+CSS input type=file 文件类型限制属性 accept (HTML 5)

标签: filehtml
7245人阅读 评论(0) 收藏 举报
分类:

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

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

  默认是这样的,所有文件类型都会显示出来,如果想限制它只显示我们设定的文件类型呢,比如“word“,”excel“,”pdf“文件 

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

<input type="file" id="userImage" name="userImage" accept="image/x-png,image/gif,image/jpeg,image/bmp"/>	

文件标签美化:  http://blog.csdn.net/u010003835/article/details/51013916


完整的文件上传按钮(含文件标签美化,自定义上传按钮的文字 + 文件路径input  和上传按钮 的对齐(浮动)):

<input type="file" id="userImage" name="userImage" style="display:none;" onchange="upfileName.value=this.value" accept="image/x-png,image/gif,image/jpeg,image/bmp"/>
<span style="height:50px;line-height:50px; /*清理浮动*/overflow:auto; zoom:1; ">
    <input type="text" id="upfileName" readonly="readonly" style="float:left; width:220px;"/>
    <input type="button" onclick="userImage.click()" style="float:left; margin-left:5px; height:23px; width:57px; background: url(<%=request.getContextPath() %>/resources/images/sc.png) no-repeat;border:none;"/>
</span>	



  这样选择的时候默认会显示为这样:

文件选择框内只显示出你自定义文件类型的文件,也还比较方便。

 

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

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

 

附支持的文件类型:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
*.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   image/vnd.dwg   AutoCAD Drawing Database
*.dxf   image/vnd.dxf   AutoCAD Drawing Interchange Format
*.gif   image/gif   Graphic Interchange Format
*.htm   text/html   HyperText Markup Language
*.html  text/html   HyperText Markup Language
*.jp2   image/jp2   JPEG-2000
*.jpe   image/jpeg  JPEG
*.jpeg  image/jpeg  JPEG
*.jpg   image/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   image/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   image/vnd.svf   Simple Vector Format
*.tif   image/tiff  Tagged Image Format File
*.tiff  image/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

  

6
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

HTML5 input file类型,accept(文件类型控制)

在上传文件的时候,需要限制指定的文件类型。            accept表示可以上传文件类型,image表示图片,*表示所有支持的格式。 accept可以指定如下信息: ...
  • zhuyangru
  • zhuyangru
  • 2017-04-20 09:21
  • 4388

html5 中input type=‘file’实现文件图片等的上传的文件类型限制

可以直接设置input标签的accept属性来限制上传文件的类型 <input type="file" accept="application/msword" ><br><br>accept属性列表<br>1.a...
  • u012679583
  • u012679583
  • 2016-03-11 14:54
  • 9587

<input type="file" />accept属性列表

input type="file" accept="application/msword" >br>br>accept属性列表br> 1.accept="application/msexcel" 2.ac...
  • shenshen123jun
  • shenshen123jun
  • 2014-03-20 15:57
  • 52160

<input type='file'> accept属性

input标签是在前台开发中经常使用的,总结下其accept属性,即允许上传的文件类型。 input标签内置了很多允许上传的文件类型,只需要对应配置即可。 input type="file" accept="application/msword" >...
  • wenxuechaozhe
  • wenxuechaozhe
  • 2016-06-25 16:33
  • 21043

input type=file accept中可以限制的文件类型

在上传文件的时候,需要限制指定的文件类型。 <input type="file" accept="image/*" /> **accept表示可以上传文件类型,image表示图片,*表示所有支持的格式。 ===================...
  • u010735684
  • u010735684
  • 2016-03-29 14:04
  • 1122

<input type="file" />浏览时只显示指定文件类型

浏览时只显示指定文件类型 input type="file" accept="application/msword" >br>br>accept属性列表br> 1.accept="application/msexcel...
  • wclxyn
  • wclxyn
  • 2011-12-21 11:00
  • 97897

html input="file" 浏览时只显示指定文件类型 xls、xlsx、csv

Valid Accept Types: For CSV files (.csv), use:  type="file" accept=".csv" /> For Excel Files 20...
  • hanshileiai
  • hanshileiai
  • 2015-03-28 17:02
  • 53898

HTML5文件选择框(各种类型)

<input type="file" />浏览时只显示指定文件类型 input type="file" accept="application/msword" >br>br&g...
  • pwh309315228
  • pwh309315228
  • 2016-11-30 09:35
  • 1627

input file控件限制上传文件类型

网页上添加一个input file HTML控件:   默认是这样的,所有文件类型都会显示出来,如果想限制它只显示我们设定的文件类型呢,比如“word“,”excel“,”pdf“文件    解决办法是可以给它添加一个accept属性,比如: 附支持的文件类型: *.3gpp...
  • lvvcs
  • lvvcs
  • 2016-10-24 10:25
  • 282

input="file" 浏览时只显示指定excel文件,筛选特定文件类型

显示 .xls, .xlsx, .csv 文件...   只显示  Excel (.xlsx) 文件...   只显示 Excel (.xls) 文件...   只显示图片.   ...
  • DosMing
  • DosMing
  • 2017-09-08 10:12
  • 752
    个人资料
    • 访问:907854次
    • 积分:13363
    • 等级:
    • 排名:第1153名
    • 原创:350篇
    • 转载:341篇
    • 译文:0篇
    • 评论:44条