uploading and preview image with ajax

Code:

&lt;form name="frmregister" method="post" action="http://url/codeigniter/upload/do_upload" enctype="multipart/form-data"&gt;

&lt;input type="hidden" name="post" value="1" /&gt;        

Upload a photo: &lt;input type="file" name="file" id="file" /&gt;&lt;input type="submit"  name="preview" value="preview"&gt; 

&lt;input class="button" type="submit" name="upload" value="upload" /&gt;

&lt;/form&gt;

Code:

var ajaxPost = function() {

    

    // Get request object

    function getRequest() {

        if (window.XMLHttpRequest)

            return new XMLHttpRequest();

        else if (window.ActiveXObject)

            return new ActiveXObject("Microsoft.XMLHTTP");

        else

            alert('Ajax not supported');

        return null;

    }



    // Basic callback - could add error handler if you wanted

    function handleChange(req, callback) {

        if(req.readyState == 4) {

            if (req.status == 200) {

                if (callback)

                    callback(req.responseText);

            }

            else {

                alert("Ajax request failed.");

            }

        }

    }



    // Create query string from json object

    function handleParams(params) {

        if(!params) {

            return null;

        }

        else {

            var encoded = "";

            for (var field in params) {

                fieldval = params[field];

                encoded += field + '=' + fieldval + '&';

            }

            return encoded;

        }

    }



    // Combine it all in one pretty interface

    return function(uri, callback, data) {

        var request = getRequest();

        request.open('POST', uri, true);

        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        request.onreadystatechange = function() { handleChange(request, callback) };

        request.send(handleParams(data));

        return request;

    };

}();