image upload with ajax and php

Question

I want to use ajax to upload image. In this module:

1. On clicking browse and selecting image, it will be uploaded and displayed over file field.

Answer 1

Assuming you have a handle on the server side.. here is a small function and example on how to implement the 'iframe hack' in javascript.

html

Upload

javascript

var fileUpload = function(form /* HTMLElement */, action /* Form Action URL */, callback /* Callback function */) {
    /* vars */
    var atribs = {
        "target": "upload_iframe",
        "action": action,
        "method": "post",
        "enctype": "multipart/form-data",
        "encoding": "multipart/form-data"
    }, iframe;
    /* iframe listener */
    var ilistener = function() {
        var results;
        listener.remove(this, 'load', ilistener);
        if( 'contentDocument' in this ) {
            results = this.contentDocument.body.innerHTML;
        } else if ( 'contentWindow' in this ) {
            results = this.contentWindow.document.body.innerHTML;
        } else if ( 'document' in this ) {
            results = this.document.body.innerHTML;
        } else {
            throw "i'm dead jim :/";
        }
        callback.apply(this,[results]); // call the callback, passing the results
        this.parentNode.removeChild(this); // remove the iframe
    };

    /* create the iframe */
    form.parentNode.appendChild(FragBuilder([{"tagName": "iframe","id": "upload_iframe","name": "upload_iframe","style": {"height": "0","width": "0","border": "0"}}]));
    /* collect the iframe back */
    iframe = By.id('upload_iframe');
    /* set the form properties */
    for( var attr in atribs ) {
        if( attr in form ) {
            form[attr] = atribs[attr];
        }
    }
    /* attach the event listener to the iframe */
    listener.add(iframe, 'load', ilistener);
    /* submitting the form */
    form.submit();
};

// get the form, and the results area
var form = document.forms['image-upload'], results = By.id('upload-results');
// listen for the form submit, capture it, and run the iframe upload.
listener.add(form, 'submit', function(e) {
    e.preventDefault();
    results.innerHTML = 'Uploading...';
    fileUpload(this, 'server.php' /* really anything */, function(data) { 
        console.log(data);
            results.innerHTML = "Uploaded!";
    });
});

Please note: for simplicity purposes I have used the following utilities. https://github.com/rlemon/FragBuilder.js DocumentFragment builder from JSON input.
https://gist.github.com/2172100 event listener, and By utility functions.
*these are both easily removed.