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/
[...] Reading binary files using Ajax « Nagoon97’s Weblog Says: April 9, 2008 at 6:59 am [...]
[...] Reading binary files using Ajax [...]
What encoding of Unicode does
readUnicodeStringexpect? From the script it looks to me like it’s just reading 2 bytes per codepoint.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()
[...] You can read the full post here. [...]
[...] Builder: con la librería javascript BinFileReader se pueden crear efectos de mosaico mediante Ajax: (Clic para [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[...] Reading binary files using Ajax - [...]
[...] Reading binary files using Ajax « nagoon97’s Weblog (tags: webdev javascript ajax code) Comment (RSS) | Trackback [...]
[...] Reading binary files using Ajax [...]
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.
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.