Stuk · Stuk · Jan 14, 2013 · Dec 23, 2012 · Dec 23, 2012 · Dec 23, 2012
diff --git a/examples/download-zip-file.html b/examples/download-zip-file.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>JSZip example : download the generated zip file</title>
+
+<link media="screen" href="style.css" type="text/css" rel="stylesheet">
+
+<script type="text/javascript" src="../jszip.js"></script>
+<script type="text/javascript">
+window.onload = function () {
+  var zip = new JSZip();
+  zip.file("Hello.txt", "Hello world\n");
+
+  // data URI
+  document.getElementById('data_uri').href = "data:application/zip;base64," + zip.generate();
+
+  // Blob
+  var blobLink = document.getElementById('blob');
+  try {
+    blobLink.download = "hello.zip";
+    blobLink.href = window.URL.createObjectURL(zip.generate({type:"blob"}));
+  } catch(e) {
+    blobLink.innerHTML += " (not supported on this browser)";
+  }
+};
+</script>
+</head>
+<body>
+<h1><a href="../">JSZip</a> example : download the generated zip file</h1>
+<p>Tip : check the source of the page !</p>
+<h2>The data URL</h2>
+<div>
+  <a href="#" id="data_uri">click to download</a>
+</div>
+<h2>The Blob URL</h2>
+<div>
+  <a href="#" id="blob">click to download</a>
+</div>
+</body>
+</html>
diff --git a/examples/get-binary-files-xhr2.html b/examples/get-binary-files-xhr2.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>JSZip example : get zip filw with XHR</title>
+
+<link media="screen" href="style.css" type="text/css" rel="stylesheet">
+
+<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">
+window.onload = function () {
+
+  //=========================
+  // XHR1
+  //=========================
+  var xhr1 = new XMLHttpRequest();
+  xhr1.open('GET', '../test/ref/text.zip', true);
+  xhr1.overrideMimeType('text/plain; charset=x-user-defined');
+
+  xhr1.onreadystatechange = function(e) {
+    if (this.readyState == 4 && this.status == 200) {
+      var zip = new JSZip(this.responseText);
+      var elt = document.getElementById('xhr1_way');
+      elt.innerHTML = "<p>loaded ! (as a " + (typeof this.responseText) + ")</p>";
+      elt.innerHTML += "<p>Content = " + zip.file("Hello.txt").asText();
+    }
+  };
+
+  xhr1.send();
+
+  //=========================
+  // XHR2, arraybuffer
+  // Can't use jQuery :(
+  // http://bugs.jquery.com/ticket/11461
+  //=========================
+  var xhr2_arraybuffer = new XMLHttpRequest();
+  xhr2_arraybuffer.open('GET', '../test/ref/text.zip', true);
+  xhr2_arraybuffer.responseType = 'arraybuffer';
+
+  xhr2_arraybuffer.onreadystatechange = function(e) {
+    if (this.readyState == 4 && this.status == 200) {
+      var zip = new JSZip(this.response);
+      var elt = document.getElementById('xhr2_way_arraybuffer');
+      elt.innerHTML = "<p>loaded ! (as a " + this.response + ")</p>";
+      elt.innerHTML += "<p>Content = " + zip.file("Hello.txt").asText();
+    }
+  };
+
+  xhr2_arraybuffer.send();
+
+  //=========================
+  // XHR2, blob
+  // Can't use jQuery :(
+  // http://bugs.jquery.com/ticket/11461
+  //=========================
+  var xhr2_blob = new XMLHttpRequest();
+  xhr2_blob.open('GET', '../test/ref/text.zip', true);
+  xhr2_blob.responseType = 'blob';
+
+  xhr2_blob.onreadystatechange = function(e) {
+    if (this.readyState == 4 && this.status == 200) {
+      var elt = document.getElementById('xhr2_way_blob');
+      elt.innerHTML = "<p>loaded ! (as a " + this.response + ")</p>";
+      var reader = new FileReader();
+      reader.onload = function (e) {
+        var zip = new JSZip(e.target.result);
+        elt.innerHTML += "<p>Content = " + zip.file("Hello.txt").asText();
+      };
+      reader.readAsArrayBuffer(this.response);
+    }
+  };
+
+  xhr2_blob.send();
+};
+</script>
+</head>
+<body>
+<h1><a href="../">JSZip</a> example : get a file with an ajax call</h1>
+<p>Tip : check the source of the page !</p>
+<h2>The xhr1 way</h2>
+<div id="xhr1_way"></div>
+<h2>The xhr2 way, with arraybuffer</h2>
+<div id="xhr2_way_arraybuffer"></div>
+<h2>The xhr2 way, with blob</h2>
+<div id="xhr2_way_blob"></div>
+</body>
+</html>
diff --git a/examples/read-local-file-api.html b/examples/read-local-file-api.html
@@ -0,0 +1,86 @@
+<!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>
diff --git a/examples/style.css b/examples/style.css
@@ -0,0 +1,6 @@
+.error {
+  color : red;
+}
+.warning {
+  color : orange;
+}