HTML 文件类表单元素如何限制上传类型，Accept属性设置

需求描述：简单的控制file的选择类型

解决方法：使用HTML  input file 的accept属性控制

 

实例：

<form action="demo_form.asp">
  <input type="file" name="pic" accept="image/gif,image/jpg" />
  <input type="submit" />
</form>

<form action="demo_form.asp">
  <input type="file" name="pic" accept=".gif,.jpg" />
  <input type="submit" />
</form>

解读：这里重点关注 accept属性。 上面的代码设置了文件只能选择 gif 和jpg,HTML 4.01 与 HTML 5 之间的差异，低版本IE貌似不支持。

注意点：这种限制并不可靠，只是做一个简单的限制，最好是服务端再次进行判断。

 

使用Js验证文件类型：

//验证文件的格式 
function validateFile(){ 
var fileObject=$("#filename"); 
var errorObject=$("#error"); 
var filepath=fileObject.val(); 
var fileArr=filepath.split("//"); 
var fileTArr=fileArr[fileArr.length-1].toLowerCase().split("."); 
var filetype=fileTArr[fileTArr.length-1]; 
if(filetype!="xls"&&filetype!="xlsx"&&filetype!="doc"&&filetype!="docx" 
&&filetype!="jpeg"&&filetype!="jpg"&&filetype!="ppt"&&filetype!="pptx" 
&&filetype!="txt"&&filetype!="bmp"&&filetype!="png"&&filetype!="gif"){ 
fileObject.focus(); 
errorObject.html("上传文件必须为图片、doc、ppt、xls、txt文件！"); 
}else{ 
errorObject.remove(); 
} 
} 

 

 

附支持的文件类型（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   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

 

个人独立博客网站：http://blog.wxp123.me/p/50