onchange file input change img src and change image color

Question

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   HTML    lt input type  file  id  upload  onchange  readURL this value     gt       lt img id  img  src     alt  your image    gt    script  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            JSFiddle

User · Answer

Below solution tested and its working  hope it will support in your project  HTML code       lt input type  file  name  asgnmnt file  id  asgnmnt file  class  span8       style  display none   onchange  fileSelected this   gt       lt br gt  lt br gt       lt img id  asgnmnt file img  src  uploads assignments abc jpg  width  150  height  150       onclick  passFileUrl    style  cursor pointer   gt   JavaScript code      function passFileUrl        document getElementById  asgnmnt file   click               function fileSelected inputData       document getElementById  asgnmnt file img   src   window URL createObjectURL inputData files 0

User · Answer

Try with this code  you will get the image preview while uploading   lt input type  file  id  upload  onChange  readURL this     gt   lt img id  img  src     alt  your image    gt    function readURL input    var ext   input files 0   name   substring input files 0   name   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

User · Answer

You need to send this object only instead of this value while calling onchange   lt input type  file  id  upload  onchange  readURL this     gt    because you are using input variable as this in your function  like at line   var url   input value    reading value property of input element   Working DEMO  EDIT - Try using jQuery like below --  remove onchange from input field     lt input type  file  id  upload   gt    Bind onchange event to input field      function          upload   change function        var input   this      var url     this  val        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                       jQuery Demo

User · Answer

Simple Solution  No Jquery   x000D   x000D   lt img id  output  src    width  100  height  100  gt  x000D   x000D   lt input name  photo  type  file  accept  image    onchange  document getElementById  output   src   window URL createObjectURL this files 0    gt  x000D   x000D   x000D

User · Answer

in your HTML    lt input type  file  id  yourFile  gt  don t forget to reference your js file or put the following script between  lt script gt  lt  script gt  in your script    var fileToRead   document getElementById  yourFile     fileToRead addEventListener  change   function event        var files   fileToRead files      if  files length            console log  Filename      files 0  name           console log  Type      files 0  type           console log  Size      files 0  size     bytes              false

[javascript] onchange file input change img src and change image color

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to opencart

Examples related to cpanel