zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    洛谷 P1508 Likecloud-吃、吃、吃
    Codevs 1158 尼克的任务
    2017.10.6 国庆清北 D6T2 同余方程组
    2017.10.6 国庆清北 D6T1 排序
    2017.10.3 国庆清北 D3T3 解迷游戏
    2017.10.3 国庆清北 D3T2 公交车
    2017.10.3 国庆清北 D3T1 括号序列
    2017.10.4 国庆清北 D4T1 财富
    2017.10.7 国庆清北 D7T2 第k大区间
    2017.10.7 国庆清北 D7T1 计数
  • 原文地址:https://www.cnblogs.com/wangpg/p/4909746.html
Copyright © 2011-2022 走看看