Edit in JSFiddle

function fileChange(evt) {
    // the evt object contains the file object
    var files = evt.target.files;
    // now you create a file object
    var objectURL = window.URL.createObjectURL(files[0]);
    // create a image element  
    var img = document.createElement("img");
    // the fileReader has the events to get access to the image 
    var reader = new FileReader(); 
     // Closure to capture the file information.
    var f = reader.onload = function(theFile) {
          img.src = theFile.target.result;
    // now the reader instance has the file reference, it's a image chached at client browser
    // displaying in fade


    // getting the file input as a dom object
    var fileInput = $('.file-input').get(0);
    // check if FileReader exist
    if(window.FileReader) {
        // bind the button used to open a file
        $('.add').bind('click', function(e){
            // triggering a click to open dialog
            // adding a event listener
            fileInput.addEventListener("change", fileChange, false);
            return false;    
    } else {
        // if the browser doesnt support, just show the basic file input, progressive enhancement

/* hide the default input */
.hide {
 display: none;   
<fieldset class="image-field side-field">
            <div class="image-placeholder">
                <p><a href="#" class="add">add file</a></p>
            <div class="hide default-file-chooser">
                <input type="file" class="file-input" />