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");
    img.classList.add("obj");
    // 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
    reader.readAsDataURL(files[0]);
    // displaying in fade
    $('.image-placeholder').hide().html(img).fadeIn('slow');
}

$(function(){

    // 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
            $(fileInput).trigger('click');
            // 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
        $('.image-placeholder').hide();
        $('.default-file-chooser').show();
    } 

});
/* 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>  
            <div class="hide default-file-chooser">
                <input type="file" class="file-input" />
            </div>
</fieldset>