在网页中使用Data URI嵌入Base64编码文件
在网页中嵌入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,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAd ??
-
Hx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3 ??
-
Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCACKAGMDASIA ??
-
AhEBAxEB/8QAGwAAAgMBAQEAAAAAAAAAAAAAAAQBAwUGAgf/xABCEAACAQMBBAYHAwoFBQAAAAAB ??
-
AgMABBEFBhIhMRNBUWFxgRQiMkKRocEjUtEHFTNicoKSsbLCFqLS4fAlNDVTdP/EABQBAQAAAAAA ??
-
AAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD7hRUVNBBIAyTw ??
-
ql7uBAS0gAHXzrzqF3HaQb8nEkhVXGSxPIAVRbxyyMJZx9pzVM5Cf70FhupZf+2gbH35QUHw51Tc ??
-
R6nIv2V3bRn/AOdj/eKfVMcySa9bo7B8KDm5I9qIDvQXNjcge4yMuf5/zrS0fULq6jddSsWs50OC ??
-
N/eR+9Tw+BFadK3kEcxi6WFJVV84YZAPLl50DVFLSxPCnSWo4rzj6mHYOw17trhLiISIeB6uyguo ??
-
oooIooooJqCd0ZPKprH2jkZ7ZLKNiHu3ER3ee7zf/LkeLCgrsCdVvG1DOYFylrw4BeRk8W447FAP ??
-
XW0ihBha8W0K28CRIAqqAAByFW0BRRRQRUMoIwe3NeqW1C49FtWl4ZBAAPXxoGKQnRrK4NzGPsXP ??
-
2ydn647+3tHHq4tWdwl1bpMnJh8Oo1awDKQaAUhgCDkGppa0HRb0B4BOKD9X/b8KZoCiiiggnAJr ??
-
Ets3m0Ukh4x2kW6v7THif8vyFbUmdw45ngKy9nlUx3lwvKW6dVP6qfZj+knzoNaioqaAooqMgY76 ??
-
BLULKe6dGh1G4tAoIYRBfWyDx4g8ckfCud13S5t5YRrWpMI4Zrl8unqgKQPd6y3Dwrpbu5SNTlwF ??
-
HM9n/OJ8qyp4JbzTdRnUYlvkFvDn3Yz6o+bMaBHZ+yugZrGTVrxDupcxFdzJSRRnmpzhlbs9qupt ??
-
ozFBHG0rzFVA6STG83ecACsrW19Aez1OIYS0PRTAf+hsAn90hW8A1aVnMJBImcmNyPI8R8iKDzfH ??
-
olS5HOI+t3qef40yDkZFVXib9rKo4kqcUvo0/T2EeeaeofLl8sUDtFFFBTezrbWstw/sxI0jeABP ??
-
0pDZRGTZzTw/tmEM57WPE/MmvO1bFdnr1BzlQRD98hfrTWiYOj2RHIwIfkKBwsAyjtqia5C3CwLx ??
-
fd3iO7kPjx+Bqq9n6GRXIJ3QcAcSTwAHzpLZ/pJI7jUrtvWuHLIx4KsY4LjuwM+B7c0GszCOMtIw ??
-
HaTWYb83N0VgzuL6iEe83vHwAwPEnsrOe8k1y8dYnMenQrvvIOBZeYOe1uY7FGfeFWCY2enNcxwg ??
-
zzKBBCOGAfYXu7T2CgVvJW1TXo9HtWzFbgS3jjkAfZXxP9PiK19SXUAFEF1DZwp7O5bmeQ8OzkPg ??
-
anZvRxpNiRI3SXc7ma5lI4vI3PyHAAdQFcL+V7S9o9Z02aXTGlFnZToDZxpvekLu5aRl94BiF3cH ??
-
2WPHhQdtpt1bXu/atqbXjlSHRhFxHWCFHAeNI2k0mj6vBp87MyOBFFIx9tMncz3j1lPb6p68Vw/5??
-
ONlPzisuqa7HEJ5IwkUsFmtt0DhhuGPdVfWHrZIHWAc8RXW7YrOdU0yGBs3LgNE5HvxneHkTQdme ??
-
IwaxdEboL+9s26nLr39vyK1qWdwl3aQ3MXsSoHXPYRmkujWPXt48Olh3ge9eHzBPwoNOijFFBj7T ??
-
ENaxxdpaQjuVT9StM6D/AOHtB92ML8OH0pLaNt2Kdzyjt8A97MM/00/o43bIJ91iPr9aDI2oumjt ??
-
dQihfE4iG7jmu9jB+K1DRnXehgtiE0iJF3sH9Pw9VB+p2nrHLgc142q09ZjJeNI6rEUWUZ4GM4z4 ??
-
cevsz3YX/JhqAudDnsXcNPp1y8Dke8Oat4EH5UG3f20Vtpno68I5ZB0zdbAnLnxIBHyFNQ2280c1 ??
-
wg6UZbH3WPD5DhRJH6VeoG/RWx3iPvSEcPgDnxI7KcoIqi5s7e6ZWnjDOnsuCVZfAjiKYooK1gjB ??
-
U7u8V5FiWI8zXG7azrDtTs4GOFJmLnOMDC8SfjXbV8t2+H5z/KBYWIHSRWtkJJVABALu2Ac/sg4+ ??
-
lB2uyV2l1ZXHRDEC3DmDviY7ynzzw7sUzqR6O8tJh7kgU+DHd/k1J6IBbX7W4JO/AjEk+8C2f6hT ??
-
mtIWiYKPW3GI8Rx+lBp0UKQyhhyPEUUGJtYP+lPu+0x+OBWhp5CpKOrpB81U/WkdpDvQFOeEyfN1 ??
-
X6mrFl6Gwu5vuRiT+FB/poGL+Pehu1PsyQH4jP4iuEtLj8w7b2V3wSx1fToUuMDAWRSEV/IlV/fz ??
-
1V9CuAHjA573qjzBrgdeiD6Zs7dMqMolmtHDjgVdW592YxQfQ0UKDjrJJr1WNp18ltBDHNKzwMej ??
-
jlkOWVgPZc+R9b48eJ2M9lAVOaivEsqQoXkYKo+fd30FOp39rpen3F/fSrFbW6F5HY8gK+Y7IdNq ??
-
mr32u3ilbm+m3kRj+iQDCL3YUDJ/kSSiW3Wr3Ov65Lp1xMbTT7N23YSQCzKAekkPHlngMHHA8ScU ??
-
7sxMvo7rArdBECDvDJc893B7zkjrJCk+2zB2lkQdajZMlVg3QfF0OfMHPgR1k1r3RDXkCHrz81b8 ??
-
Kz7GHcie5b2jIMnOc8QefX1caZuJM6laHtyD5HH1oNGFSkKKfdUD5UVIGBiigx9aG9bXr9jwR/B1 ??
-
P91REOn069h7YWQ/w4/Grtfj3NHvXXmMSn90qf7aX0hsy6omf0cpTH8X0IoGNEuTd7PaVdMcma3g ??
-
kPmqn61kR6et/onorFlEGovulDxUb7YI8mB8687C3Jk2E08k5MDmA925MUHyArY0ldy7vVHsySmT ??
-
l+7j/L8+6gwtTSSPZu5eNVLwqk6gcAAjBmPhugjryFHOvelXF/DZme2k+zBA9HkRnXPUBjiCeeBk ??
-
Dsqdaa5/Nl3bRjennPo2FIOWcbvDtALDPnnHCuhhtDapGsIDRqeCjhjJOST1nt86DOg1DaC7bdj0 ??
-
a3tUzxmubrPDtCKuT4ErWpbWjI/TXUxnn6mK7qp3KvV8z301U0Hx7anTIv8AGN+8zMCZ42QFeDFl ??
-
UgD73EnhyyBkjhjatjbQ6TMsSIqLCd0L75ZSRnxBLfsnPOQhew1XRLe+ufSJULl1ETqCRlc4zwPY ??
-
TzzWZf7NRxJJP0zMN1x0eAFyx4YHmM8eOO80DtpcGaLVowSRDPwJ5n1VP414dw05mHEQXAJ8Gcf6 ??
-
s+VJ7NSia51ZieEzdJ/E0v0ApzQ06aTUonwQrpGQf2Bmg36KAMADOaKCu7gW6tZrd/ZlRkPgRisL ??
-
Z/JvdeQnLi4APj0a/XNdF1VjaTbG01W9V/anUTHzkk/kCooOc2GJi2U1OPPCHUZiO4Flf+6ulsgj ??
-
3U0YLZZpd4g4ON/l3f8AO2sDZmzntdA15JUKlrmR0z1jcUfSuo02LAaXHtu5znqLkj+dBZLbBJIJ ??
-
IY1xCGUIABwOOXV1VatxGThiVPY6kVbRQKw39tM7qkqEKSN7eGDjnVqy9IfsgSv3zy8u2vXRoWDF ??
-
FLduK90EAY680lrR3dLuH+4oc+AIP0p6qriETwvExIDDGRQcZoKPZy3AcFWxAHXsJE2Rnr4mtfY9 ??
-
+mj1Gf792f6E/Gqtpk9DQyxL+kCoMdbgPu/M0/szaGzsJEIwWmZuXVwA+QFBr0UUUBSd0pS9tZxy ??
-
9aJu4Ngj5rjzpyjGedBSYFMMkQHqvnPnXjTVKafbK3tCJQfHHGmaKAqOupooCiiigKKKKBO/sheS ??
-
2pkxuQyiQjtI5U0Fwcjwr1RQFFFFB??
-
??
-
</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 |
|