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

标签: file html
8390人阅读 评论(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

  

查看评论

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

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

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

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

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

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

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

可以直接设置input标签的accept属性来限制上传文件的类型 accept属性列表1.accept=”application/msexcel” 2.accept=”application/msw...
  • u012679583
  • u012679583
  • 2016-03-11 14:54:23
  • 10562

input type=file 实现上传、预览、删除等功能

简单代码 实现input type=file上传、预览、删除等功能。
  • u014359150
  • u014359150
  • 2016-07-23 13:41:28
  • 55567

文件上传时只接收指定的文件类型

Valid Accept Types: For CSV files (.csv), use:  type="file" accept=".csv" /> For Excel...
  • lx_1024
  • lx_1024
  • 2017-12-07 18:11:07
  • 115

input file实现多选和限制文件上传类型

//取出上传文件格式的后缀名 var fileAccept = $("#id").val().split(".")[1];//获取上传文件的...
  • lwj734114646
  • lwj734114646
  • 2016-10-24 14:53:53
  • 9046

input file类型,文件类型的限制

直接限制input type='file'的文件类型限制,通过accept属性进行设定,多个类型用逗号分隔开,因为accept是html5的新特性,所以火狐和IE的支持就显得单薄了, 如: ...
  • qq_27088383
  • qq_27088383
  • 2017-11-03 11:32:46
  • 430

<input type="file">accept属性 调起手机摄像头 支持Safari Chrome和大部分手机内置浏览器

之前在网上找了很多资料用html调取手机的摄像头,一般在Safari浏览器上都不好用,其实后来发现,标签的accept属性就可以很好的解决这个问题。 1.调起相册  2.调起摄像头...
  • gaomingyangc
  • gaomingyangc
  • 2016-08-18 15:25:23
  • 5831
    个人资料
    持之以恒
    等级:
    访问量: 109万+
    积分: 1万+
    排名: 946
    文章分类
    最新评论