Uploading image files to server without using HTML form element

Question

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.

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??

all answers are welcome

Many thanks in advance

server side 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";
    }

Javascipt code to make an HTTPrequest

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);
}

Answer 1

Maybe you should try sending the image data via POST. It doesn't have any size restrictions, and the contents can follow any format.

Answer 2

No you can't upload without form tag. There are workarounds that seem to use Ajax, such as an iframe or using Flash.

Answer 3

If you don't want to use form elements then how are you going to take the input from user? You can use Flash, Java but it only makes your work more difficult.. I may recommend using the form input , process it using Javascript and then send it to a PHP Uploader Script.You can either redirect the user to that PHP page and do the work there or do it with AJAX and take an integer which will represent your new uploaded image then insert it in your database or wherever you store them and show user his new image..