1. 程式人生 > >file input標籤支援圖片、視訊、多圖上傳

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()">