| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| <title>JSZip example : the File API</title> |
| |
| <link media="screen" href="style.css" type="text/css" rel="stylesheet"> |
| <script type="text/javascript" src="../test/jquery-1.8.3.min.js"></script> |
| |
| <script type="text/javascript" src="../jszip.js"></script> |
| <script type="text/javascript" src="../jszip-load.js"></script> |
| <script type="text/javascript" src="../jszip-inflate.js"></script> |
| <script type="text/javascript"> |
| $(function () { |
| if (!window.FileReader || !window.ArrayBuffer) { |
| alert("You will need a recent browser to use this demo :("); |
| return; |
| } |
| |
| |
| var $result = $("#result"); |
| $("#file").on("change", function(evt) { |
| // remove content |
| $result.html(""); |
| |
| // see http://www.html5rocks.com/en/tutorials/file/dndfiles/ |
| |
| var files = evt.target.files; |
| for (var i = 0, f; f = files[i]; i++) { |
| |
| if (f.type !== "application/zip") { |
| $result.append("<div class='warning'>" + f.name + " isn't a 'application/zip', opening it as a zip file may not work :-)</div>"); |
| } |
| var reader = new FileReader(); |
| |
| // Closure to capture the file information. |
| reader.onload = (function(theFile) { |
| return function(e) { |
| var $title = $("<h3>", { |
| text : theFile.name |
| }); |
| $result.append($title); |
| var $ul = $("<ul>"); |
| try { |
| |
| var dateBefore = new Date(); |
| // read the content of the file with JSZip |
| var zip = new JSZip(e.target.result); |
| var dateAfter = new Date(); |
| |
| $title.append($("<span>", { |
| text:" (parsed in " + (dateAfter - dateBefore) + "ms)" |
| })); |
| |
| // that, or a good ol' for(var entryName in zip.files) |
| $.each(zip.files, function (index, zipEntry) { |
| $ul.append("<li>" + zipEntry.name + "</li>"); |
| // the content is here : zipEntry.asText() |
| }); |
| // end of the magic ! |
| |
| } catch(e) { |
| $ul.append("<li class='error'>Error reading " + theFile.name + " : " + e.message + "</li>"); |
| } |
| $result.append($ul); |
| } |
| })(f); |
| |
| // read the file ! |
| // readAsArrayBuffer and readAsBinaryString both produce valid content for JSZip. |
| reader.readAsArrayBuffer(f); |
| // reader.readAsBinaryString(f); |
| } |
| }); |
| }); |
| </script> |
| </head> |
| <body> |
| <h1><a href="../">JSZip</a> example : reading a local file with the File API</h1> |
| <h2>Choose the local(s) zip file(s)</h2> |
| <p class="note">Note : your browser will process the zip file, don't choose a file too big !</p> |
| <input type="file" id="file" name="file" multiple /> |
| <h2>Content :</h2> |
| <div id="result"></div> |
| </body> |
| </html> |
