IMAGE-UPLOADER.JS

JavaScript functions used to make the AJAX calls. Uploading of images is done by submitting a form to an iframe, deleting is done with a real AJAX call. My AJAX calls return JavaScript instead of XML, saving me the trouble of parsing data.

image-upload.html image-upload.class.php image-upload.js

//Developed by Francisco Charrua
//on May 2011

function getXMLObject()
{
         var xmlHttp = null;
         try
         {
           xmlHttp = new XMLHttpRequest();
         }
         catch(e)
         {
              try
              {
                  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
              }
              catch(e)
              {
                   try
                   {
                       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                   }
                   catch(e)
                   {
                         xmlHttp = null;
                   }
              }
         }

         return(xmlHttp);
}

var ajax = getXMLObject();

function go()
{
         var forms = document.getElementsByTagName('form');
         
         for(var form = 0; form < forms.length; form++)
         {
             var inputs = forms[form].childNodes;
             for(var input = 0; input < inputs.length; input++)
             {
                 if(inputs[input].type == 'file')
                 {
                    if(forms[form].id == 'add_image')
                    {
                       inputs[input].onchange = function() {add_image();};
                    }  else {
                       inputs[input].onchange = function() {save_image(this.id);};
                    }
                 }
                 
                 if(inputs[input].type == 'button')
                 {
                    if(inputs[input].value == 'delete')
                    {
                       inputs[input].onclick = function() {delete_image(this.id)};
                    }
                 }
             }
         }
}

function add_image()
{
         document.getElementById('add_image').submit();
}

function save_image(id)
{
         document.getElementById('save_image_' + id).submit();
}

function delete_image(id)
{
         ajax.onreadystatechange = confirm_ajax;
         
         var image = 'id=' + id;
         
         ajax.open('POST', 'delete-image.ajax.php', true);
         
         ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
         ajax.setRequestHeader('Content-length', image.length);
         ajax.setRequestHeader('Connection', 'close'); 
         
         ajax.send(image);      
}

function confirm_ajax()
{
         if(ajax.readyState == 4)
         {            
            if(ajax.status == 200)
            {
               eval(ajax.responseText);
            }
         }
}