As part of a series of articles I am discussing some of the challenges I faced when trying to build a HTML5 and JavaScript free online icons editor.
I wanted users to be able to open and edit existing icon files in my icon editor. As icon files can contain multiple frames, I needed to access these individual frames so they can be displayed and be available to edit for the user. The number, size and location of frames contained within an icon is all stored in the icon header. The icon header is a collection bytes located at the start of an icon file so I needed to read the binary data contained in the file.
We can now read files easily in the browser without having to send any data back to a server. In this installment I show how you can read binary data of a local file in the browser using the HTML5 File API.
To start with we're going to add an input element and set the type attribute to "file", then in a script block we are going to handle the file input's onchange event.
- <body>
- <input id="browseOpen" type="file"/>
- <script type="text/javascript">
- var fileInput = document.getElementById("browseOpen");
- fileInput.onchange = function () {
- // Code to handle onchange event goes here
- };
- </script>
- </body>
Now we need to add the code to handle the onchange event. In here we are going to create a FileReader object. We will use the readAsBinaryString method of the FileReader object which will give us the raw binary data. We can pass a File object to the readAsBinaryString if we want to read the whole file or we can pass a Blob object if we just want to read a certain section of a file. In this example we are going to pass a File object to read the whole file. We also need to handle the onloadend event of the FileReader as the data we read with readAsBinaryString is only available to use once the whole file or blob has been read by the FileReader. Our code in the onchange event handler now looks like this.
- var fr = new FileReader();
- fr.onloadend = function () {
- // Code to handle onloadend event
- };
- fr.readAsBinaryString(this.files[0]);
In the onloadend event handler we can access the data that has just been read via the FileReader's result attribute. We can then loop through the result attribute and call the charCodeAt method to return an integer value of each byte. In this example I'm going to convert the byte to a hexadecimal string representation using toString(16), build up one long string and then display the string to the user. Here's the full working example.
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Reading Binary Data with the File API and JavaScript</title>
- </head>
- <body>
- <input id="browseOpen" type="file"/>
- <script type="text/javascript">
- var fileInput = document.getElementById("browseOpen");
- fileInput.onchange = function () {
- var fr = new FileReader();
- fr.onloadend = function () {
- var result = this.result;
- var hex = "";
- for (var i = 0; i < this.result.length; i++) {
- var byteStr = result.charCodeAt(i).toString(16);
- if (byteStr.length < 2) {
- byteStr = "0" + byteStr;
- }
- hex += " " + byteStr;
- }
- alert(hex);
- };
- fr.readAsBinaryString(this.files[0]);
- };
- </script>
- </body>
- </html>
No comments:
Post a Comment