nagoon97’s Weblog

you can actually do alot with javascript!

Reading binary files using Ajax April 6, 2008

Filed under: ajax,javascript — nagoon97 @ 2:18 pm
Tags: , , ,

A growing number of web applications are making more and more use of client-side technologies because thanks to Ajax, it is now possible to write more fluid and more responsive web applications using only client-side technologies.

Now, web developers from all around the globe are releasing really interesting utilities and applications using only client-side technologies, many of which used to be within the domain of server-side technologies.

But when it comes to binary files, helping hands from server-side technologies are often necessary.

So I googled around to see what I can do about binary files with Ajax and found this Marcus Granado’s post at http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html

What he posted there worked like a charm for FireFox and Safari but I couldn’t get it to work for IE.

But luckily, within the same page, someone had posted up a solution for IE as a comment, which is written in VBScript.

So I put them all together in this BinFileReader function, which provides cross-browser support and helper methods to easily access the binary contents.

 

* BinFileReader: http://www.heypage.com/nagoon97/BinFileReader/BinFileReader.js

getFileSize() Return the file size
getFilePointer() Return the reading position
movePointerTo(iTo) Move the reading position to iTo.
movePointer(iDirection) Move the reading position in iDirection.
For all the following read functions,
– The reading position will move to the end of where the content is last read
– When iFrom is ommited, current reading position is used
readNumber(iNumBytes, iFrom) Read and return iNumBytes-byte number starting at iFrom.
readString(iNumChars, iFrom) Read and return iNumChars characters starting at iFrom.
readUnicodeString(iNumChars, iFrom) Read and return iNumChars unicoded characters starting at iFrom.

 

* Example:
var bmpFile = new BinFileReader(“image.bmp”);
bmpFile.movePointerTo(18);
var width = bmpFile.readNumber(4);
var height = bmpFile.readNumber(4);

 
* Demo:
http://www.heypage.com/nagoon97/BinFileReader/BinFileReader_demo.html

http://www.heypage.com/nagoon97/BinFileReader/MosaicBuilder_demo.html

 

* Related Posts 

http://nagoon97.wordpress.com/2008/04/09/ajax-mosaic-builder/

About these ads
 

19 Responses to “Reading binary files using Ajax”

  1. [...] Reading binary files using Ajax « Nagoon97’s Weblog Says: April 9, 2008 at 6:59 am [...]

  2. [...] Reading binary files using Ajax [...]

  3. henrah Says:

    What encoding of Unicode does readUnicodeString expect? From the script it looks to me like it’s just reading 2 bytes per codepoint.

  4. nagoon97 Says:

    Hi henrah, :-)
    It expects the binary values to be the representation of a string encoded in the normal fixed-byte Unicode that javascript uses in String.fromCharCode()

  5. [...] You can read the full post here. [...]

  6. [...] Builder: con la librería javascript BinFileReader se pueden crear efectos de mosaico mediante Ajax: (Clic para [...]

  7. [...] My first thought was to read binary video files using a technique like the Andy Na posted about here, figuring that there must be some really simple to parse video formats around, but I soon changed [...]

  8. [...] My first thought was to read binary video files using a technique like the Andy Na posted about here, figuring that there must be some really simple to parse video formats around, but I soon changed [...]

  9. [...] My first thought was to read binary video files using a technique like the Andy Na posted about here, figuring that there must be some really simple to parse video formats around, but I soon changed [...]

  10. [...] Reading binary files using Ajax « nagoon97’s Weblog (tags: webdev javascript ajax code) Comment (RSS)  |  Trackback [...]

  11. Charles Says:

    This is a very useful piece of code.

    I have an IP camera where I can download an image
    shot (jpg) by HTTP. I want to do this dynamically,
    say every 10 seconds and update a web page
    showing it. I can do it by an applet.

    I wonder if this code can be used instead.

    So, how do I get the “file” returned to be loaded into the
    image field of my HTML page via DOM. I am using IE 7.

    Will this scheme work ?

    elem = getElementbyId(…);

    elem = varfile;

    where varfile is returned by the code utility here.

    Does it work on all browsers ?

    Thanks,

    Charles.

  12. nagoon97 Says:

    Hello Charles,
    It sounds like Ajax is not required at all for your purpose.
    You can just set up a timer and update the src attribute of the image every 10 seconds. :-)

  13. evan Says:

    All I want to do. Is read an image file (or any binary file) into a variable. Just like the code you based this on can do. How do I do that?

  14. Jason Huang Says:

    Hi there,

    I checked your src code. So you removed the following code:
    netscape.security.PrivilegeManager.enablePrivilege(“UniversalBrowserRead”);

    I tried it then and it does not work for me in FF. Then I went to your demo and it was excellent. So I viewed your html source code. I found there’s two pairs of body tag and the actual script is located in between. Is there any reason for that?

    Thanks and have a great day,

    Jason Huang

  15. nagoon97 Says:

    @evan:
    The binary contents are stored in “fileContents” variable.
    But you are not allowed to directly access it in the code and it won’t be very useful anyways because it contains different type of information depending on the browser you are using. (a binary string for FF and an array for IE as IE can’t handle binary strings)
    However, if you really wish to get the value, you may create a public function that returns the value or make the vairable public.

  16. nagoon97 Says:

    @Jason:
    The reason why I had two body tags is… I was tired and I didn’t know I had two body tags. lol
    I just got rid of one of the body tags and it still works alright.
    Thx for pointing that out. :-)

  17. alex s Says:

    A very cool and useful script!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 33 other followers