Reading binary files using Ajax

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/

19 Replies to “Reading binary files using Ajax”

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

  2. 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()

  3. 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.

  4. 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. 🙂

  5. 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

  6. @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.

  7. @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. 🙂

Leave a Reply to Jason Huang Cancel reply

Your email address will not be published. Required fields are marked *