title: Uploading image files to server without using HTML form element
body: <p>I need to upload a pic on server without using html form tag. Is there a simple to do this. Actually, i have been building an app where user will be allowed to either upload his pic or take a new one from webcam and if user click the upload button then the pic move to the server.
  When user upload pic and press upload button, it works fine because i have been using HTML input tag with type='file' but when i take pic from webcam and render it on HTML5 canvas tag then i click the upload button, no pic move to the server because there is no file in the input tag. In both cases, i am using the same canvas element and img tag to show it the user.</p>
  
  <p>IS there a way to upload without using form element or is there a way that i can assign an image object that i get from Canavas element into the same form input element??</p>
  
  <p>all answers are welcome</p>
  
  <p>Many thanks in advance</p>
  
  <p>server side code</p>
  
  <pre><code>    function bytesToSize1024($bytes, $precision = 2) {
      $unit = array('B','KB','MB');
      return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i];
  }
  
  $sFileName = $_FILES['image_file']['name'];
  $sFileType = $_FILES['image_file']['type'];
  $sFileSize = bytesToSize1024($_FILES['image_file']['size'], 1);
  
   $target = "upload/"; 
   $target = $target . basename( $_FILES['uploaded']['name']) ; 
   $ok=1;
  $error=$_FILES["image_file"]["error"];
  
  
  $uploaddir = '/var/www/example119/upload/';
  $uploadfile = $uploaddir . basename($_FILES['image_file']['name']);
  
    if(!empty($_FILES))
    {
       if(move_uploaded_file($_FILES['image_file']['tmp_name'], "$target$sFileName")) 
       {
       echo "The file ". basename( $_FILES['image_file']['name']). " has been uploaded...";
       } 
       else {
       echo "Sorry, there was a problem uploading your file. {$error}";
       }
    }
    else
      {
      echo "_files is empty";
      }
  </code></pre>
  
  <p>Javascipt code to make an HTTPrequest</p>
  
  <pre><code>function startUploading() {
      // cleanup all temp states
  
      iPreviousBytesLoaded = 0;
      var oProgress = document.getElementById('progress');
      oProgress.style.display = 'block';
      oProgress.style.width = '0px';
  
      // get form data for POSTing
      //var vFD = document.getElementById('upload_form').getFormData(); // for FF3
      var vFD = new FormData(document.getElementById('upload_form')); // this is for when user upload from browser box
      var vvFD=document.getElementById('preview1'); //added by TODO to test
      // create XMLHttpRequest object, adding few event listeners, and POSTing our data
      var oXHR = new XMLHttpRequest();        
      oXHR.upload.addEventListener('progress', uploadProgress, false);
      oXHR.addEventListener('load', uploadFinish, false);
      oXHR.addEventListener('error', uploadError, false);
      oXHR.addEventListener('abort', uploadAbort, false);
      oXHR.open('POST', 'example_upload/upload.php');
      //oXHR.send(vFD);
      oXHR.send(vvFD);
  
      // set inner timer
      oTimer = setInterval(doInnerUpdates, 300);
  }
  </code></pre>