title: AJAX/PHP based upload with progress bar for large files
body: <p>I've been trying to create a non-flash upload panel which also shows a progress bar.
  On our server we have PHP 5.3 (cannot upgrade to 5.4 for now, so the new upload progress feature cannot be used => <a href="http://php.net/manual/en/session.upload-progress.php" rel="nofollow">http://php.net/manual/en/session.upload-progress.php</a>).
  We cannot use flash based solutions, extensions or similar. </p>
  
  <p>Hence I've tried using an XMLHttpRequest combined with AJAX.
  The problem here is that I've only achieved partial success.</p>
  
  <p>I've managed to upload and save on the server a file of about 380 MB, however, when trying with a larger file like 4 GB, it won't be saved on the server (if I check with Firebug at one point it would say "POST aborted").</p>
  
  <p>Another strange thing is that with the same file the xhr.upload.loaded starts with the same dimension of xhr.upload.total and starts counting from there.</p>
  
  <p>Does anyone know how to solve this problem or has an alternative solution?</p>
  
  <p>The client code is: 
  </p>
  
  <pre><code>&lt;script type="application/javascript" src="jquery.js"&gt;&lt;/script&gt;
  
  &lt;script type="application/javascript"&gt;
  
  function uploadToServer()
  {
      fileField = document.getElementById("uploadedFile");
      var fileToUpload = fileField.files[0]; 
  
      var xhr = new XMLHttpRequest();
      var uploadStatus = xhr.upload;
  
      uploadStatus.addEventListener("progress", function (ev) {
              if (ev.lengthComputable) {
                  $("#uploadPercentage").html((ev.loaded / ev.total) * 100 + "%");
              }
          }, false);
  
      uploadStatus.addEventListener("error", function (ev) {$("#error").html(ev)}, false);
      uploadStatus.addEventListener("load", function (ev) {$("#error").html("APPOSTO!")}, false);
  
      xhr.open(
              "POST",
              "serverUpload.php",
              true
              );
          xhr.setRequestHeader("Cache-Control", "no-cache");
          xhr.setRequestHeader("Content-Type", "multipart/form-data");
          xhr.setRequestHeader("X-File-Name", fileToUpload.fileName);
          xhr.setRequestHeader("X-File-Size", fileToUpload.fileSize);
          xhr.setRequestHeader("X-File-Type", fileToUpload.type);
          //xhr.setRequestHeader("Content-Type", "application/octet-stream");
          xhr.send(fileToUpload);
  }
  
  
  
  $(function(){
  
      $("#uploadButton").click(uploadToServer);
  
  });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML part:
  </p>
  
  <pre><code>&lt;form action="" name="uploadForm" method="post" enctype="multipart/form-data"&gt;
  
    &lt;input id="uploadedFile" name="fileField" type="file" multiple /&gt;
  
  &lt;input id="uploadButton" type="button" value="Upload!"&gt;
  
  &lt;/form&gt;
  
  &lt;div id="uploadPercentage"&gt;&lt;/div&gt;
  &lt;div id="error"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Server side code:
  </p>
  
  <pre><code>&lt;?php
  
  $path = "./";
  $filename = $_SERVER['HTTP_X_FILE_NAME'];
  $filesize = $_SERVER['CONTENT_LENGTH'];
  
  
  $file = "log.txt";
  $fo= fopen($file, "w");
  fwrite($fo, $path . PHP_EOL);
  fwrite($fo, $filename . PHP_EOL);
  fwrite($fo, $filesize . PHP_EOL);
  fwrite($fo, $path . $filename . PHP_EOL);
  
  file_put_contents($path . $filename, 
  file_get_contents('php://input')
  );
  
  ?&gt;
  </code></pre>