Extract Zip and Rar Files with HTML5
Here is the HTML5 Online Archive Viewer
This is important, as the browser needs to know how to process the data in a Blob object. If the data is just text, we want to see text, but if the data is an image, you want the browser to show the picture and not text. Since I stored the archive contents inside a JSON object, I needed to convert the JSON to a HTML table and used this script. Finally, when someone clicks the “open” button, I used the createObjectURL function to construct a Blob URL that points to the contents of the file. So, we are reading archive files, showing the files inside the archive, and also showing the contents of the those files, all on the client side.
Check out the way that all works here.
Strategies for using local files in your web application
Reading Files Using The HTML5 FileReader API