title: change src of img tag with input file
body: <p>I have a input and img tag like this in my HTML code:</p>
  
  <pre><code>&lt;input type="file" name="img2" id="chooseimg" onchange="readURL(this);"&gt;
  
  &lt;img id="img-edt" src="l1.png" alt="your image" width="502" height="319"/&gt;
  </code></pre>
  
  <p>And in js i use this code to change image:</p>
  
  <pre><code>function readURL(input) {
   if (input.files &amp;&amp; input.files[0]) {
       var reader = new FileReader();
       reader.onload = function(e) {
           $('#img-edt')
               .attr('src', e.target.result)
               .width(502)
               .height(319);
       };
       reader.readAsDataURL(input.files[0]);
   }
   showDimension();
   }
  </code></pre>
  
  <p>After that image load,i need to know the dimension of original image,so i use this function:</p>
  
  <pre><code>function showDimension() {
   var mm = document.getElementById("img-edt");
   var ww = mm.naturalWidth;
   var hh = mm.naturalHeight;
   var x = document.getElementById("teeest");
   x.innerHTML = "w is: " + String(ww) + "h is: " + String(hh);
   }
  </code></pre>
  
  <p>But the problem is that always it returns size of previous image. please help me with this problem.</p>