UPLOAD DE FOTO PHP - JQUERY

[svincenzo 0]

Pessoal Boa Tarde!

 

Estou com uma dúvida que já quebrei a cabeça para conseguir e não consigo. Sou novo na tecnologia Jquery, e gostaria da ajuda de vocês para esta resolução.

 

Em muitas pesquisas feitas na Internet cheguei a um código que me ajuda bastante, funciona na inclusão da foto fica show, porém, quando edito o cadastro de usuário não aparece nada, fica em branco ou até quando vou incluir um usuário novo, gostaria no lugar onde aparece a foto após selecionar tivesse uma imagem ilustratoria de que precisa indicar uma foto.

 

Abaixo segue código

 

Este código é o que faz tudo acontecer em Jquery

<script type="text/javascript">
		$(document).ready(function() {
        $("#fileUpload").on('change', function() {
          //Get count of selected files
          var countFiles = $(this)[0].files.length;
          var imgPath = $(this)[0].value;
          var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
          var image_holder = $("#image-holder");
          image_holder.empty();
          if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
            if (typeof(FileReader) != "undefined") {
              //loop for each file selected for uploaded.
              for (var i = 0; i < countFiles; i++) 
              {
                var reader = new FileReader();
                reader.onload = function(e) {
                  $("<img />", {
                    "src": e.target.result,
                    "class": "img-circle"
                  }).appendTo(image_holder);
                }
                image_holder.show();
                reader.readAsDataURL($(this)[0].files[i]);
              }
            } else {
              alert("This browser does not support FileReader.");
            }
          } else {
            alert("Pls select only images");
          }
        });
      });
</script>		

o código em PHP/HTML

 

O DIV que está em vermelho é a linha que o Jquery utiliza para mostrar a imagem selecionada.

<div id="wrapper">
 <div id="image-holder"></div> 
   <br />      
   <input id="fileUpload" type="file"><br />
  </div>

Imagem do meu cadastro

 

- como aparece quando estou editando o cadastro do usuário!!!

 

- Como aparece quando estou cadastrando o usuário

 

 

depois de selecionado.

 

 

 

Alguem poderia me ajudar.

 

 

obrigado

 

Samuel Vincenzo