MENU


Upload Progress and FormData

This script displays the upload progress. A form is submitted without reloading the whole page. Note that when using FormData(), the strings in the form are already %-encoded. Note also that the execution must be asynchronous, ie. the third parameter to xhr.open() must be true.
RESETRUNFULL
<?php
// upload.php
move_uploaded_file($_FILES["upload_file"]["tmp_name"],$_FILES["upload_file"]["name"]);
echo "input_text1: ".$_REQUEST["input_text1"]."<br/>";
echo "input_text2: ".$_REQUEST["input_text2"]."<br/>";
//echo "secret: ".$_REQUEST["secret"];
?>

<!DOCTYPE html><html>
<head>
<script>

var start_time;

function start_upload() {
   d=new Date();
   start_time=d.getTime();

   f = document.getElementById("file_uploader").files[0];
   if (f.size > 10*1024*1024){
      document.getElementById("msg").innerHTML="file too large";
      return;
   }
   if (f.name.substr(-4,4)!=".exe"){
      document.getElementById("msg").innerHTML="invalid type";
      return;
   }

   fd = new 
          FormData(document.getElementById('upload_form')); 
   fd.append("input_text2","===&&&===");
   var xhr = new XMLHttpRequest();        
   xhr.upload.addEventListener('progress',upload_progress, false);
   xhr.addEventListener('load', upload_finish, false);
   xhr.addEventListener('error', upload_error, false);
   xhr.open('POST', 'upload.php');
   xhr.send(fd);
}

function upload_progress(e) {
   if (!e.lengthComputable) return;
   p = e.loaded * 100 / e.total;
   p = p.toFixed(3);
   d = new Date();
   r = e.loaded/((d.getTime()-start_time)/1000)/1024;
   r = r.toFixed(3);
   document.getElementById("msg").innerHTML=p+"% completed.<br/>rate: "+r+"KB/s.<br/>";
} 

function upload_finish(e) {
   document.getElementById("msg").innerHTML+=e.target.responseText;
}

function upload_error(e){
   document.getElementById("msg").innerHTML="Upload error.";
}
</script>
</head>
<body>
   <form id="upload_form">
      <input type="hidden" name="secret" value="~!@#$%^&*()_+ "/>
      <input type="text" name="input_text1"/><br/>
      <input type="file" name="upload_file" id="file_uploader"/>
   </form>
   <button onclick="start_upload();">Upload</button>
   <p id="msg"></p>
</body>
</html>