file input标签支持图片、视频、多图上传

说明
1)file input 标签的三个属性合理使用可支持图片上传,视频上传,多图上传
2)即accept、capture、multiple三个属性

各属性介绍
1、accept属性
直接打开系统文件目录,规定在文件上传中服务器只接受图像文件
属性值有
这里写图片描述
只在FF和chrome上有效。
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

2、capture属性
捕获到系统默认的设备,camera–照相机,camcorder–摄像机,microphone–录音

3、multiple属性
布尔属性,规定允许用户输入到元素的多个值–用于支持多选
html5中新属性
XHTML中,禁止属性最小化,必须定义为

eg.

<input type="file" id="files3" name="files3[]" accept="image/*" onchange="savePictures()"/>
<br/><br/>
<input type="file" id="files" name="files[]" accept="image/*" multiple="multiple" onchange="savePictures()"/>
<br/><br/>
<input type="file" id="files2" name="files2[]" capture="camera" accept="image/*" multiple="multiple" onchange="savePictures()"/>
<br/><br/>
<input type="file" id="file_upload" name="file_upload" accept="video/*" onchange="saveVideo()">
<br/><br/>
<input type="file" id="file_upload2" name="file_upload2" capture="camcorder" accept="video/*" onchange="saveVideo()">
<br/><br/>
<input type="file" id="file_upload3" name="file_upload3" accept="audio/*" onchange="saveAudio()">
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值