title: onchange file input change img src and change image color
body: <p>onchange event is not working. What am I supposed to do to get result on same page. I dont want to redirect to any other page to upload image. Is this issue is because of opencart? I dont know if it is correct to write like this in cpanel. I am using opencart and cpanel. Is there any other way?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;input type='file' id="upload" onchange="readURL(this.value)" /&gt;
      &lt;img id="img" src="#" alt="your image" /&gt;
  </code></pre>
  
  <p><strong>script</strong></p>
  
  <pre><code>function readURL(input) {
  var url = input.value;
  var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
  if (input.files &amp;&amp; input.files[0]&amp;&amp; (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
      var reader = new FileReader();
  
      reader.onload = function (e) {
          $('#img').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
  }
  else{
       $('#img').attr('src', '/assets/no_preview.png');
    }
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Junkie/stN8U/" rel="noreferrer">JSFiddle</a></p>