показываем изображение перед загрузкой на сервер. выложен пример использования. копируем код и сохраняем в html формате. запускаем в браузере и проверяем работу)

                        
<style>

  .preview_image{

    width: 300px;

    height: 300px;

  }

</style>

<input type="file" id="img_load"/>

<div class="preview_image"></div>

<script>

function img_load(id,img){

  oFReader = new FileReader(),rFilter=/^(?:image\/jpeg|image\/png)$/i; //допустимые форматы

  oFReader.onload = function (oFREvent) {

    var url='url("'+oFREvent.target.result+'")';

    img.css({'background-image': url,'display':'block'});

  };

  function loadImageFile() {

    if (document.getElementById(id).files.length === 0)

      { return 1; }

    var oFile = document.getElementById(id).files[0];

    if (!rFilter.test(oFile.type))

      { alert("Неверный формат картинки!"); return 0; }

    oFReader.readAsDataURL(oFile);

    return 1;

  }

  $('input#'+id+'').change(function() {

    if(loadImageFile()) {

      //код который будет выполниться после показа изображения

    }

  });

}

$(document).ready(function(){

  var id=$('#load_img');//<input type="file" id="load">

  var img=$('.preview_image');//куда вставляем изображение

  //в данном примере это фон для <div class="preview_image">

  img_load(id,img);//запускаем функцию

});

</script>