title: Pass the image file varible from JS function to php function on the same page
body: <p>In the view, there is a option for upload image with the help of js, now i want pass that image to the php function on the same page. I have tried this code, but i don't know what to do now.</p>
  
  <p>View:</p>
  
  <pre><code>&lt;a href="" id="anchortag"&gt;&lt;button type="button" name="userimage" class="profile-user-img img-responsive img-circle"&gt;&lt;img class="profile-user-img img-responsive img-circle" src="&lt;?php echo base_url();?&gt;dist/img/user4-128x128.jpg" alt="User profile picture"&gt;&lt;/button&gt;&lt;/a&gt;
  
                      &lt;script type="text/javascript"&gt;
                        $("button").click(function(){
                        var file = new FileModal("image/png");
      file.onload = function(d){
          console.log(d);
      };
  
      file.show();
  });
  
  
  /*The FileModal Class*/
  function FileModal(accept){
      var callback = function(){};
      return {
          show: function(){
              $("&lt;input&gt;").attr({
                  type: "file",
                  accept: accept
              }).appendTo("body").hide().change(function(e){
                  var file = e.target.files[0],
                      reader = new FileReader();
                  reader.onload = function(progress){
                      callback(progress.target.result);
                  };
                  reader.readAsDataURL(file);
              }).click();
          },
          set onload(c){ callback = c;
        }
  
      }
  }
  &lt;/script&gt;
  </code></pre>