title: How to upload multiple file under 1 http request
body: <p>Using HTML5 chunking, I could do file upload with smaller piece. But the problem starts when it started using multiple http POST request which will cause the computer slowing down, or probably crash. Is there anyway to have the splitted file under one http request.. so if I have 5 files it would be only 5 http request eventhough I use html5 split chunk</p>
  
  <p>e.g: if I upload 5 files, each file will be split to 1mb chunk, so if first file is 10mb, then it will become 10 pieces of 1mb chunk. And the problem is, each chunk will be under 1 http request so just the first file it will be 10 HTTP request.
  Imagine if I have 1gb files, it will become 1000 HTTP request and slow down the computer. </p>
  
  <p>This is example code:
  </p>
  
  <pre><code>        //Prepare element progress after the page load completely
          var uploaders = [];
          var totalChunks = 0;
          var progress;
          var bars;
          $(document).ready(function() {
              //progress = document.querySelector('progress');
              //bars = document.querySelector('#bars'); 
          });        
  
          //function for after the button is clicked, slice the file 
          //and call upload function
          function sendRequest() {       
              //clean the screen
              //bars.innerHTML = '';
  
  
              var file = document.getElementById('fileToUpload');   
  
              for(var i = 0; i &lt; file.files.length; i++) {      
                  var blob = file.files[i];         
                  var originalFileName = blob.name;
                  var filePart = 0
  
                  const BYTES_PER_CHUNK = 10 * 1024 * 1024; // 10MB chunk sizes.
                  const SIZE = blob.size;
  
                  var start = 0;
                  var end = BYTES_PER_CHUNK;
  
                  totalChunks = Math.ceil(SIZE / BYTES_PER_CHUNK);
  
                  while( start &lt; SIZE ) {                    
                      if (blob.webkitSlice) {
                          //for Google Chrome
                          var chunk = blob.webkitSlice(start, end); 
                      } else if (blob.mozSlice) {
                          //for Mozilla Firefox
                          var chunk = blob.mozSlice(start, end);
                      }       
  
                      uploadFile(chunk, originalFileName, filePart, totalChunks, i);
                      filePart++;
                      start = end;
                      end = start + BYTES_PER_CHUNK;
                  }
              }                
          }
  
          function uploadFile(blobFile, fileName) {
              var fd = new FormData();
              fd.append("fileToUpload", blobFile);
  
              var xm = $.ajax({
                  url: "upload.php"+"?"+"file1="+fileName,
                  type: "POST",
                  data: fd,
                  processData: false,
                  contentType: false,
              });               
          }
  
          function uploadFile(blobFile, fileName, filePart, totalChunks, divBarsSelector) {
              if(filePart == 0) {
                  bars = document.querySelector('#bars' + divBarsSelector);  
              }
  
              var progress = document.createElement('progress');
              progress.min = 0;
              progress.max = 100;
              progress.value = 0;
              bars.appendChild(progress);   
  
              var fd = new FormData();
              fd.append("fileToUpload", blobFile);
  
              var xhr = new XMLHttpRequest();                
              xhr.open("POST", "upload.php"+"?"+"file="+fileName + filePart, true);
  
              xhr.onload = function(e) {
                  //make sure if finish progress bar at 100%
                  progress.value = 100;
  
                  //counter if everything is done using stack
                  uploaders.pop();
  
                  if (!uploaders.length) {
                      bars.appendChild(document.createElement('br'));
                      bars.appendChild(document.createTextNode('DONE :)'));
                      //mergeFile(fileName, totalChunks);
                  }                  
              };
  
              // Listen to the upload progress for each upload.   
              xhr.upload.onprogress = function(e) {;
                  if (e.lengthComputable) {
                      progress.value = (e.loaded / e.total) * 100;
                  }
              };                 
  
              uploaders.push(xhr);
              xhr.send(fd);
          }
  </code></pre>
  
  <p>and the server part for receiving will be upload.php
  </p>
  
  <pre><code>$target_path = "uploads/";
  $tmp_name = $_FILES['fileToUpload']['tmp_name'];
  $size = $_FILES['fileToUpload']['size'];
  $name = $_FILES['fileToUpload']['name'];
  
  $originalName = $_GET['file'];
  
  print_r("*******************************************\n");
  print_r($originalName);
  print_r("\n");
  print_r($_FILES);
  print_r("\n");
  print_r("*******************************************\n");
  $target_file = $target_path . basename($name);
  
  //Result File
  $complete = $originalName;
  $com = fopen("uploads/".$complete, "ab");
  error_log($target_path);
  
  if ( $com ) {
      // Read binary input stream and append it to temp file
      $in = fopen($tmp_name, "rb");
      if ( $in ) {
          while ( $buff = fread( $in, 1048576 ) ) {
              fwrite($com, $buff);
          }   
      }
      fclose($in);
      fclose($com);
  }
  </code></pre>