Thursday, December 23, 2010

Data URL scheme, include files in-line in the web page

There is a restriction in the blogger.com sites: you can't upload files.
The data URL scheme provides a way to include data in-line in web pages as if they were external resources.

The format of data URL:

data:[<mediatype>][;base64],<data>

Some examples:
  • Image:  Larry (If you don't see an image your browser does not support data URL)
<IMG
SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
hhx4dbgYKAAA7"
ALT="Larry">
<A
HREF="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
hhx4dbgYKAAA7">file.dat</A>
  • Link to the same image declared with MIME type: application/octet-stream:  file.dat
  • An example with a zip file (MIME type: application/zip):  data.zip
This site http://www.dopiaza.org/tools/datauri/ provides an easy way to convert a file to the data URL format. Otherwise one may need to uuencode the file.

Some resources:
http://en.wikipedia.org/wiki/Data_URI#cite_note-MSDN-3
http://tools.ietf.org/html/rfc2397
http://htmlcoderhelper.com/how-to-force-save-as-dialog-box-in-firefox-besides-changing-headers/

No comments:

Post a Comment