title: zip multiple files on server and echo back zip file
body: <p>Consider a site which allows user to store files (pdf, docx, jpeg, png, gif only). Part of the html:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="../folder/lola.doc" target="_blank"&gt;lola.doc&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../folder/lola.pdf" target="_blank"&gt;lola.pdf&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../folder/lola.jpeg" target="_blank"&gt;lola.jpeg&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../folder/lola.docx" target="_blank"&gt;lola.docx&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When a user clicks on any of the above, the file either opens or a save dialpg appears. This is fine.</p>
  
  <p>Now I want user to be able to select some of these files (which are on the server). The files will be zipped and echo back to user with a prompt to save. I cannot use above, so I have this option:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;select class="multiple_select " multiple&gt;
      &lt;option value="../folder/lola.doc"&gt;lola.doc&lt;/option&gt;
      &lt;option value="../folder/lola.pdf"&gt;lola.pdf&lt;/option&gt;
      &lt;option value="../folder/lola.jpeg"&gt;lola.jpeg&lt;/option&gt;
      &lt;option value="../folder/lola.docx"&gt;lola.docx&lt;/option&gt;
  &lt;/select&gt;
  &lt;button id="btn" type="button"&gt;Download&lt;/button&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>js:
  
  $('#btn').on('click', function() {
      var options_selected = $('select').find('option:selected');
      options_selected_le = options_selected.length;
      var i;
      var options_selected_arr = [];
      var options_names_arr = [];
      for (i=0; i&lt;options_selected_le; i++) {
          options_selected_arr.push(options_selected.eq(i).val());
          options_names_arr.push(options_selected.eq(i).text());
      }
  
      var fd = new FormData();
      fd.append('zipname', zipname);
      fd.append('options_selected_arr', JSON.stringify(options_selected_arr));
      fd.append('options_names_arr', JSON.stringify(options_names_arr));
      $.ajax({
          url: 'download_multiple_files.php', 
          type: 'post', 
          data: fd,
          cache: false,
          contentType: false, 
          processData: false,
          beforeSend: function(xhr) { 
              xhr.setRequestHeader("X-Download", "yes"); 
          },
          success: function(response){
              alert(response); //I am sure this is wrong
              // Do I need js to handle zip file here. I guess php should automatically do this
          }
      }); 
  });
  
  &lt;?php
    session_start();
    require 'server_conn.php'; // for connection and holds test_input function
    // do some security checks ...
  
    $zipname = 'file.zip';
    $arr = json_decode($_POST['options_selected_arr']);
    $file_arr = [];
    foreach ($arr as $obj) {
      array_push($files_arr, test_input($obj));
    }  
  
    $arr = json_decode($_POST['options_names_arr']);
    $files_names_arr = [];
    foreach ($arr as $obj) {
      array_push($files_names_arr, test_input($obj));
    }
  
    $zip = new ZipArchive;
    $zip-&gt;open($zipname, ZipArchive::CREATE);
    for ($i=0; $i&lt;$c; $i++) {
      $zip-&gt;addFile($file_arr[$i], $files_names_arr[$i]);
    }  
    $zip-&gt;close();
  
    header('Content-Type: application/zip');
    header('Content-Length: ' . filesize($zipname));
    header('Content-Disposition: attachment; filename="file.zip"');
    readfile($zipname);
    unlink($zipname);   
  ?&gt;
  </code></pre>
  
  <p>Response from server is giberish and there is no error indication. I suspect my php is defective.</p>