afb-client/bower_components/jszip/documentation/examples/read-local-file-api.html

   1 ---
   2 title: "Reading a local file with the File API"
   3 layout: default
   4 section: example
   5 ---
   6
   7 <h3>Choose the local(s) zip file(s)</h3>
   8 <p class="note">Note : your browser will process the zip file, don't choose a file too big !</p>
   9 <input type="file" id="file" name="file" multiple /><br />
  10
  11 <div id="error_block" class="alert alert-danger hidden">
  12   You will need a recent browser to use this demo :(
  13 </div>
  14
  15 <div id="result_block" class="hidden">
  16   <h3>Content :</h3>
  17   <div id="result"></div>
  18 </div>
  19 <script type="text/javascript" src="{{site.baseurl}}/test/jquery-1.8.3.min.js"></script>
  20 <script type="text/javascript">
  21 (function () {
  22   if (!window.FileReader || !window.ArrayBuffer) {
  23     $("#error_block").removeClass("hidden").addClass("show");
  24     return;
  25   }
  26
  27
  28   var $result = $("#result");
  29   $("#file").on("change", function(evt) {
  30     // remove content
  31     $result.html("");
  32     // be sure to show the results
  33     $("#result_block").removeClass("hidden").addClass("show");
  34
  35     // see http://www.html5rocks.com/en/tutorials/file/dndfiles/
  36
  37     var files = evt.target.files;
  38     for (var i = 0, f; f = files[i]; i++) {
  39
  40       var reader = new FileReader();
  41
  42       // Closure to capture the file information.
  43       reader.onload = (function(theFile) {
  44         return function(e) {
  45           var $title = $("<h4>", {
  46             text : theFile.name
  47           });
  48           $result.append($title);
  49           var $fileContent = $("<ul>");
  50           try {
  51
  52             var dateBefore = new Date();
  53             // read the content of the file with JSZip
  54             var zip = new JSZip(e.target.result);
  55             var dateAfter = new Date();
  56
  57             $title.append($("<span>", {
  58               text:" (parsed in " + (dateAfter - dateBefore) + "ms)"
  59             }));
  60
  61             // that, or a good ol' for(var entryName in zip.files)
  62             $.each(zip.files, function (index, zipEntry) {
  63               $fileContent.append($("<li>", {
  64                 text : zipEntry.name
  65               }));
  66               // the content is here : zipEntry.asText()
  67             });
  68             // end of the magic !
  69
  70           } catch(e) {
  71             $fileContent = $("<div>", {
  72               "class" : "alert alert-danger",
  73               text : "Error reading " + theFile.name + " : " + e.message
  74             });
  75           }
  76           $result.append($fileContent);
  77         }
  78       })(f);
  79
  80       // read the file !
  81       // readAsArrayBuffer and readAsBinaryString both produce valid content for JSZip.
  82       reader.readAsArrayBuffer(f);
  83       // reader.readAsBinaryString(f);
  84     }
  85   });
  86 })();
  87 </script>