在网页中使用Data URI嵌入Base64编码文件

wezly

浏览: 480517 次
性别:
来自: 长沙

最近访客更多访客>>

noriri

g_man1990

未命名者

jiangyinzuo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web和JavaScript

Excel WAP Tcl Symbian XML

在网页中嵌入Base64编码文件

通过这种方法可以将任何文件转换为Base64编码

这里给出在线转换的网站：http://www.motobit.com/util/base64-decoder-encoder.asp

例子：

显示被存储为Base64编码字符串的图片的例子
使用data: URI直接在网页中嵌入.
data: URI定义于IETF标准的RFC 2397
data: URI的基本使用格式如下：
data:[<MIME-type>][;base64|charset=some_charset],<data>
mime-type是嵌入数据的mime类型，比如png图片就是image/png。
如果后面跟base64，说明后面的data是采用base64方式进行编码的。
代码如下：

<html>
<body>
<img src='data:image/gif;base64,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
2pkxuQyiQjtI5U0Fwcjwr1RQFFFFB//Z'/>
</body>
</html>

同理，这种方法可以将任何文件嵌入到你的网页中，如HTM/HTML，主要代码：'data:text/html;base64,+你的编码'

下面给出MIME-Type 列表（文件类型参照）：

123 application/vnd.lotus-1-2-3
3gp video/3gpp
aab application/x-authoware-bin
aam application/x-authoware-map
aas application/x-authoware-seg
ai application/postscript
aif audio/x-aiff
aifc audio/x-aiff
aiff audio/x-aiff
als audio/X-Alpha5
amc application/x-mpeg
ani application/octet-stream
asc text/plain
asd application/astound
asf video/x-ms-asf
asn application/astound
asp application/x-asap
asx video/x-ms-asf
au audio/basic
avb application/octet-stream
avi video/x-msvideo
awb audio/amr-wb
bcpio application/x-bcpio
bin application/octet-stream
bld application/bld
bld2 application/bld2
bmp application/x-MS-bmp
bpk application/octet-stream
bz2 application/x-bzip2
cal image/x-cals
ccn application/x-cnc
cco application/x-cocoa
cdf application/x-netcdf
cgi magnus-internal/cgi
chat application/x-chat
class application/octet-stream
clp application/x-msclip
cmx application/x-cmx
co application/x-cult3d-object
cod image/cis-cod
cpio application/x-cpio
cpt application/mac-compactpro
crd application/x-mscardfile
csh application/x-csh
csm chemical/x-csml
csml chemical/x-csml
css text/css
cur application/octet-stream
dcm x-lml/x-evm
dcr application/x-director
dcx image/x-dcx
dhtml text/html
dir application/x-director
dll application/octet-stream
dmg application/octet-stream
dms application/octet-stream
doc application/msword
dot application/x-dot
dvi application/x-dvi
dwf drawing/x-dwf
dwg application/x-autocad
dxf application/x-autocad
dxr application/x-director
ebk application/x-expandedbook
emb chemical/x-embl-dl-nucleotide
embl chemical/x-embl-dl-nucleotide
eps application/postscript
eri image/x-eri
es audio/echospeech
esl audio/echospeech
etc application/x-earthtime
etx text/x-setext
evm x-lml/x-evm
evy application/x-envoy
exe application/octet-stream
fh4 image/x-freehand
fh5 image/x-freehand
fhc image/x-freehand
fif image/fif
fm application/x-maker
fpx image/x-fpx
fvi video/isivideo
gau chemical/x-gaussian-input
gca application/x-gca-compressed
gdb x-lml/x-gdb
gif image/gif
gps application/x-gps
gtar application/x-gtar
gz application/x-gzip
hdf application/x-hdf
hdm text/x-hdml
hdml text/x-hdml
hlp application/winhlp
hqx application/mac-binhex40
htm text/html
html text/html
hts text/html
ice x-conference/x-cooltalk
ico application/octet-stream
ief image/ief
ifm image/gif
ifs image/ifs
imy audio/melody
ins application/x-NET-Install
ips application/x-ipscript
ipx application/x-ipix
it audio/x-mod
itz audio/x-mod
ivr i-world/i-vrml
j2k image/j2k
jad text/vnd.sun.j2me.app-descriptor
jam application/x-jam
jar application/java-archive
jnlp application/x-java-jnlp-file
jpe image/jpeg
jpeg image/jpeg
jpg image/jpeg
jpz image/jpeg
js application/x-javascript
jwc application/jwc
kjx application/x-kjx
lak x-lml/x-lak
latex application/x-latex
lcc application/fastman
lcl application/x-digitalloca
lcr application/x-digitalloca
lgh application/lgh
lha application/octet-stream
lml x-lml/x-lml
lmlpack x-lml/x-lmlpack
lsf video/x-ms-asf
lsx video/x-ms-asf
lzh application/x-lzh
m13 application/x-msmediaview
m14 application/x-msmediaview
m15 audio/x-mod
m3u audio/x-mpegurl
m3url audio/x-mpegurl
ma1 audio/ma1
ma2 audio/ma2
ma3 audio/ma3
ma5 audio/ma5
man application/x-troff-man
map magnus-internal/imagemap
mbd application/mbedlet
mct application/x-mascot
mdb application/x-msaccess
mdz audio/x-mod
me application/x-troff-me
mel text/x-vmel
mi application/x-mif
mid audio/midi
midi audio/midi
mif application/x-mif
mil image/x-cals
mio audio/x-mio
mmf application/x-skt-lbs
mng video/x-mng
mny application/x-msmoney
moc application/x-mocha
mocha application/x-mocha
mod audio/x-mod
mof application/x-yumekara
mol chemical/x-mdl-molfile
mop chemical/x-mopac-input
mov video/quicktime
movie video/x-sgi-movie
mp2 audio/x-mpeg
mp3 audio/x-mpeg
mp4 video/mp4
mpc application/vnd.mpohun.certificate
mpe video/mpeg
mpeg video/mpeg
mpg video/mpeg
mpg4 video/mp4
mpga audio/mpeg
mpn application/vnd.mophun.application
mpp application/vnd.ms-project
mps application/x-mapserver
mrl text/x-mrml
mrm application/x-mrm
ms application/x-troff-ms
mts application/metastream
mtx application/metastream
mtz application/metastream
mzv application/metastream
nar application/zip
nbmp image/nbmp
nc application/x-netcdf
ndb x-lml/x-ndb
ndwn application/ndwn
nif application/x-nif
nmz application/x-scream
nokia-op-logo image/vnd.nok-oplogo-color
npx application/x-netfpx
nsnd audio/nsnd
nva application/x-neva1
oda application/oda
oom application/x-AtlasMate-Plugin
pac audio/x-pac
pae audio/x-epac
pan application/x-pan
pbm image/x-portable-bitmap
pcx image/x-pcx
pda image/x-pda
pdb chemical/x-pdb
pdf application/pdf

pfr application/font-tdpfr
pgm image/x-portable-graymap
pict image/x-pict
pm application/x-perl
pmd application/x-pmd
png image/png
pnm image/x-portable-anymap
pnz image/png
pot application/vnd.ms-powerpoint
ppm image/x-portable-pixmap
pps application/vnd.ms-powerpoint
ppt application/vnd.ms-powerpoint
pqf application/x-cprplayer
pqi application/cprplayer
prc application/x-prc
proxy application/x-ns-proxy-autoconfig
ps application/postscript
ptlk application/listenup
pub application/x-mspublisher
pvx video/x-pv-pvx
qcp audio/vnd.qcelp
qt video/quicktime
qti image/x-quicktime
qtif image/x-quicktime
r3t text/vnd.rn-realtext3d
ra audio/x-pn-realaudio
ram audio/x-pn-realaudio
rar application/x-rar-compressed
ras image/x-cmu-raster
rdf application/rdf+xml
rf image/vnd.rn-realflash
rgb image/x-rgb
rlf application/x-richlink
rm audio/x-pn-realaudio
rmf audio/x-rmf
rmm audio/x-pn-realaudio
rmvb audio/x-pn-realaudio
rnx application/vnd.rn-realplayer
roff application/x-troff
rp image/vnd.rn-realpix
rpm audio/x-pn-realaudio-plugin
rt text/vnd.rn-realtext
rte x-lml/x-gps
rtf application/rtf
rtg application/metastream
rtx text/richtext
rv video/vnd.rn-realvideo
rwc application/x-rogerwilco
s3m audio/x-mod
s3z audio/x-mod
sca application/x-supercard
scd application/x-msschedule
sdf application/e-score
sea application/x-stuffit
sgm text/x-sgml
sgml text/x-sgml
sh application/x-sh
shar application/x-shar
shtml magnus-internal/parsed-html
shw application/presentations
si6 image/si6
si7 image/vnd.stiwap.sis
si9 image/vnd.lgtwap.sis
sis application/vnd.symbian.install
sit application/x-stuffit
skd application/x-Koan
skm application/x-Koan
skp application/x-Koan
skt application/x-Koan
slc application/x-salsa
smd audio/x-smd
smi application/smil
smil application/smil
smp application/studiom
smz audio/x-smd
snd audio/basic
spc text/x-speech
spl application/futuresplash
spr application/x-sprite
sprite application/x-sprite
spt application/x-spt
src application/x-wais-source
stk application/hyperstudio
stm audio/x-mod
sv4cpio application/x-sv4cpio
sv4crc application/x-sv4crc
svf image/vnd
svg image/svg-xml
svh image/svh
svr x-world/x-svr
swf application/x-shockwave-flash
swfl application/x-shockwave-flash
t application/x-troff
tad application/octet-stream
talk text/x-speech
tar application/x-tar
taz application/x-tar
tbp application/x-timbuktu
tbt application/x-timbuktu
tcl application/x-tcl
tex application/x-tex
texi application/x-texinfo
texinfo application/x-texinfo
tgz application/x-tar
thm application/vnd.eri.thm
tif image/tiff
tiff image/tiff
tki application/x-tkined
tkined application/x-tkined
toc application/toc
toy image/toy
tr application/x-troff
trk x-lml/x-gps
trm application/x-msterminal
tsi audio/tsplayer
tsp application/dsptype
tsv text/tab-separated-values
tsv text/tab-separated-values
ttf application/octet-stream
ttz application/t-time
txt text/plain
ult audio/x-mod
ustar application/x-ustar
uu application/x-uuencode
uue application/x-uuencode
vcd application/x-cdlink
vcf text/x-vcard
vdo video/vdo
vib audio/vib
viv video/vivo
vivo video/vivo
vmd application/vocaltec-media-desc
vmf application/vocaltec-media-file
vmi application/x-dreamcast-vms-info
vms application/x-dreamcast-vms
vox audio/voxware
vqe audio/x-twinvq-plugin
vqf audio/x-twinvq
vql audio/x-twinvq
vre x-world/x-vream
vrml x-world/x-vrml
vrt x-world/x-vrt
vrw x-world/x-vream
vts workbook/formulaone
wav audio/x-wav
wax audio/x-ms-wax
wbmp image/vnd.wap.wbmp
web application/vnd.xara
wi image/wavelet
wis application/x-InstallShield
wm video/x-ms-wm
wma audio/x-ms-wma
wmd application/x-ms-wmd
wmf application/x-msmetafile
wml text/vnd.wap.wml
wmlc application/vnd.wap.wmlc
wmls text/vnd.wap.wmlscript
wmlsc application/vnd.wap.wmlscriptc
wmlscript text/vnd.wap.wmlscript
wmv audio/x-ms-wmv
wmx video/x-ms-wmx
wmz application/x-ms-wmz
wpng image/x-up-wpng
wpt x-lml/x-gps
wri application/x-mswrite
wrl x-world/x-vrml
wrz x-world/x-vrml
ws text/vnd.wap.wmlscript
wsc application/vnd.wap.wmlscriptc
wv video/wavelet
wvx video/x-ms-wvx
wxl application/x-wxl
x-gzip application/x-gzip
xar application/vnd.xara
xbm image/x-xbitmap
xdm application/x-xdma
xdma application/x-xdma
xdw application/vnd.fujixerox.docuworks
xht application/xhtml+xml
xhtm application/xhtml+xml
xhtml application/xhtml+xml
xla application/vnd.ms-excel
xlc application/vnd.ms-excel
xll application/x-excel
xlm application/vnd.ms-excel
xls application/vnd.ms-excel
xlt application/vnd.ms-excel
xlw application/vnd.ms-excel
xm audio/x-mod
xml text/xml
xmz audio/x-mod
xpi application/x-xpinstall
xpm image/x-xpixmap
xsit text/xml
xsl text/xml
xul text/xul
xwd image/x-xwindowdump
xyz chemical/x-pdb
yz1 application/x-yz1
z application/x-compress
zac application/x-zaurus-zac
zip application/zip

分享到：

MIME邮件格式分析及信息提取 | 软件行业的三类主要盈利模式

2011-05-15 21:19
浏览 4652
评论(1)
分类:Web前端
查看更多

1 楼 cheung1021 2011-11-05

请问如果是一个web链接怎么播放呢？（如：http://www.iteye.com）

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论