How HTML file class form elements restrict upload types, accept property settings

Requirements Description: Simple control of File selection type

Workaround: Use the Accept property of the HTML input file to control

Instance:

 <  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  >  

Interpretation: This focus focuses on the Accept attribute. The above code sets the file to only select the difference between GIF and jpg,html 4.01 and HTML 5, the low version IE does not seem to support.

Note: This limitation is not reliable, just make a simple limit, preferably the service side to judge again.

Use JS to verify file types:

//verify the format of the filefunctionValidatefile () {varfileobject=$ ("#filename"); varerrorobject=$ ("#error"); varFilepath=fileobject.val ();varFilearr=filepath.split ("//"); varFiletarr=filearr[filearr.length-1].tolowercase (). Split ("."); varFiletype=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 ("Upload file must be picture, doc, ppt, xls, TXT file!" "); }Else{errorobject.remove ();}} 

Supported file types (Accept values):

*.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& nbsp;  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*.m P3 Audio/mpeg MPEG Audio Stream, Layer iii*.mp4 audio/mp4, video/mp4 MPEG-4 audio/video*.mpeg video/mpeg mpeg Vi Deo 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-po Werpoint 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 F Ormat File*.txt Text/plain Plain text*.wdb application/vnd.ms-works MS Works Database*.wps Application/vnd.ms-wo Rks Works Text document*.xhtml application/xhtml+xml extensible hypertext Markup LANGUAGE*.XLC APPLICATION/VND.MS-E Xcel MS Excel CHART*.XLM application/vnd.ms-excel MS Excel Macro*.xls application/vnd.ms-excel MS Excel Sprea Dsheet*.xlt application/vnd.ms-excel MS Excel template*.xlw application/vnd.ms-excel ms Excel Workspace*.xml t Ext/xml, application/XML Extensible Markup Language*.zip Aplication/zip Compressed Archive

Individual Independent blog site: http://blog.wxp123.me/p/50

How HTML file class form elements restrict upload types, accept property settings