• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
uploading and preview image with ajax

#1
[eluser]nuttynibbles[/eluser]
hello, im doing a function to upload photo. i would like to use ajax for user to preview the photo before submitting the form. so basically i want the user to click onto preview button where it will use ajax to preview the img to the user by saving the img file in a temp folder.

here is my code for the html:
Code:
<form name="frmregister" method="post" action="http://url/codeigniter/upload/do_upload" enctype="multipart/form-data">
<input type="hidden" name="post" value="1" />        
Upload a photo: <input type="file" name="file" id="file" /><input type="submit"  name="preview" value="preview">
<input class="button" type="submit" name="upload" value="upload" />
</form>

i found a ajax file on CI forum. it looks like this:
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;
    };
}();

can someone show me how to go about doing this. tks


Messages In This Thread
uploading and preview image with ajax - by El Forum - 05-29-2008, 10:02 AM
uploading and preview image with ajax - by El Forum - 08-31-2009, 04:21 AM
uploading and preview image with ajax - by El Forum - 01-08-2010, 12:28 AM
uploading and preview image with ajax - by El Forum - 07-23-2011, 02:05 AM

Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2021 MyBB Group.