title: How to use img src to browse and upload image
body: <p>I want to do is to hide the</p>
  
  <pre><code>&lt;input type='file' id="imgInp" accept="image/*" /&gt;
  </code></pre>
  
  <p>to the users and use the img tag to browse for image if the user clicked this specific img tag. How do i do that using jquery?</p>
  
  <p>current output: <a href="http://jsfiddle.net/LvsYc/3135/" rel="nofollow">http://jsfiddle.net/LvsYc/3135/</a></p>
  
  <pre><code>$(document).ready(function() {
      var currentSrc = $('#Picture').attr('src');
      if(currentSrc==null || currentSrc==""){        $('#Picture').attr('src','http://i38.photobucket.com/albums/e149/eloginko/profile_male_large_zpseedb2954.jpg');
      }
  
  
      function readURL(input) {
          if (input.files &amp;&amp; input.files[0]) {
              var reader = new FileReader();
  
              reader.onload = function (e) {
                  $('#Picture').attr('src', e.target.result);
              }
  
              reader.readAsDataURL(input.files[0]);
          }
      }
  
      $("#imgInp").change(function(){
          readURL(this);
      });
  
  });
  </code></pre>